Internet Explorer 6 中的 CSS 增强功能
生活随笔
收集整理的這篇文章主要介紹了
Internet Explorer 6 中的 CSS 增强功能
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
簡介
Microsoft??Internet?Explorer?6?及更高版本支持一些更早版本?Internet?Explorer?并不支持的?CSS?功能。支持的兩個附加?CSS?屬性為?min-height?和?word-spacing。還支持幾個其他的可能值,其中包括?white-space?屬性的?pre?值,以及?display?屬性的?list-item?值。其他重要功能包括更加嚴格的樣式表分析,以及更改哪些?HTML?元素可以表示文檔內(nèi)容可呈現(xiàn)到其中的最外部表面。
這些增強功能設(shè)計為符合?CSS?規(guī)范。CSS?中定義的所有屬性、值和功能,以及?Level?1?(CSS1)?規(guī)范均受支持,其中包括定義如何對元素及其相關(guān)?margin、border?和?padding?屬性進行度量和格式設(shè)置的框模型。
但真正的優(yōu)點在于,即使有了所有這些增強功能,也不會與您為更早版本?Internet?Explorer?開發(fā)的應用程序之間出現(xiàn)任何明顯的兼容性問題。
返回頁首
!DOCTYPE“開關(guān)”
本節(jié)說明對于?Internet?Explorer?6?或更高版本而言,如何在文檔中使用?!DOCTYPE?聲明來打開符合標準的模式。
!DOCTYPE?聲明是一個標準通用標記語言?(SGML)?聲明,它指定了文檔(理論上)遵守的文檔類型定義?(DTD)。它看起來像一個不帶結(jié)束標記的?HTML?標記,但是它以一個驚嘆號?(!)?開頭,并且包含的只是單個標記,而不是屬性名稱值對。此聲明必須位于文檔的開頭,且在?HTML?標記的前面。
通過在文檔開頭部分包括?!DOCTYPE?聲明,并在該聲明中指定一個有效的?Label(在某些情況下還會指定?Definition?和/或?URL),可以打開符合標準的模式。Label?指定?DTD?的唯一名稱,后面可以附加該?DTD?的版本號。Definition?指定在?Label?中所指定的?DTD?的定義。URL?則指定該?DTD?的位置。
在?HTML?4.0?規(guī)范中指定了三個?Definition?—?Frameset、Transitional?和?Strict。Frameset?用于?FRAMESET?文檔,Transitional?包含了除?FRAMESET?文檔之外的所有文檔,Strict?“排除了萬維網(wǎng)聯(lián)合會?(W3C)?預期將隨著樣式表支持的成熟而逐漸棄用的表示屬性和元素”£¨HTML?4.0?規(guī)范的說法)。
下表顯示了對于?Internet?Explorer?6?或更高版本,!DOCTYPE?聲明的哪些值會打開符合標準的模式。
Label?Definition?存在?URL?不存在?URL?
不存在?!DOCTYPE
??關(guān)
?關(guān)
?
HTML(不存在?Version)
??關(guān)
?關(guān)
?
HTML?2.0
??關(guān)
?關(guān)
?
HTML?3.0
??關(guān)
?關(guān)
?
HTML?3.2
??關(guān)
?關(guān)
?
HTML?4.0
?不存在?Definition
?開
?開
?
HTML?4.0
?Frameset
?開
?關(guān)
?
HTML?4.0
?Transitional
?開
?關(guān)
?
HTML?4.0
?Strict
?開
?開
?
XHTML
??開
?開
?
XML
?開?開
?開
?
無法識別的?!DOCTYPE
??開
?開
?
前面的表顯示出,當文檔不存在?!DOCTYPE?聲明時,當聲明中的?Label?不指定?HTML?規(guī)范版本時,或者它指定的版本早于?HTML?4.0?時,符合標準的模式是關(guān)閉的。該表顯示出,如果您在?!DOCTYPE?聲明中指定了?HTML?4.0?的?Frameset?或?Transitional?Definition,則只有當您包括?URL?時才會打開符合標準的模式。當您在?!DOCTYPE?聲明中指定?HTML?4.0?的?Strict?Definition,以及指定不帶任何?Definition?的?HTML?4.0?時,也會打開符合標準的模式。
為了允許創(chuàng)建新的?DTD(如?HiDad?11.22),當?!DOCTYPE?聲明不可識別時,會打開符合標準的模式。當您指定了上表沒有列出的?HTML?版本(如?HTML?1.0?或?HTML?3.22)時,也會打開符合標準的模式。
!DOCTYPE?示例
本節(jié)中的示例顯示了如何使用?!DOCTYPE?聲明來指定文檔要遵守的?DTD,以及如何打開符合標準的模式。
下面示例中的兩個聲明都指定為遵守?Transitional?HTML4.0?DTD。第二個聲明指定了該?DTD?的?URL。第一個聲明則沒有指定該內(nèi)容。第二個聲明對于?Internet?Explorer?6?或更高版本打開了符合標準的模式。第一個聲明則沒有打開該模式。
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN">
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN"?
????" http://www.w3.org/TR/html4/loose.dtd">
下面示例中的兩個聲明都指定為遵守?HTML?4.0?DTD。第一個聲明沒有指定?Definition。第二個聲明指定了此?DTD?的?Strict?Definition。兩個聲明都沒有指定?URL.。兩個聲明都打開了符合標準的模式。
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0//EN">
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Strict//EN">
返回頁首
在框內(nèi)部完成一切任務
本節(jié)講述了當您使用?!DOCTYPE?聲明打開符合標準的模式時,Internet?Explorer?6?或更高版本計算元素的?width?和?height?屬性的方式,還講述了這種方式與更早版本?Internet?Explorer?屬性計算方式的區(qū)別。
CSS1?框模型將內(nèi)容定義在一個?HTML?元素中,就好像它周圍有一個不可見的矩形邊框一樣。這個邊框周圍有三個矩形地帶,分別以?margin、border?和?padding?屬性表示。您可以使用樣式表來對該邊框及其周圍地帶的大小和外觀進行操作。
更早版本的?Internet?Explorer?計算?width?和?height?屬性的方式不遵守?CSS1?框模型。在?CSS1?中,width?屬性定義為元素內(nèi)容周圍左邊框和右邊框之間的距離。與之相似,height?屬性在?CSS1?中則定義為上邊框和下邊框之間的距離。然而,對于更早版本的?Internet?Explorer,width?和?height?屬性還包括該元素邊框周圍的?border?和?padding?地帶。下圖說明了這個區(qū)別。
圖?1.?Internet?Explorer?6?與更早版本間?width?和?height?屬性計算方式的區(qū)別的圖示說明
符合的行為
對于?Internet?Explorer?6?或更高版本而言,當您使用?!DOCTYPE?聲明打開符合標準的模式時,width?和?height?屬性分別指定左、右邊框,以及上、下邊框之間的距離。不包括?border?和?padding?地帶。
不符合的行為
當?!DOCTYPE?聲明沒有打開符合標準的模式時,正如更早版本的?Internet?Explorer?一樣,width?屬性包括該對象的內(nèi)容框,加上下列屬性的值:border-left、border-right、padding-left?和?padding-right。width?屬性值減去這些屬性值的和,等于父對象內(nèi)容框的寬度。與之相似,height?屬性值減去?border-top、border-bottom、padding-top?和?padding-bottom?屬性值的和,等于父對象內(nèi)容框的高度。
框模型示例
本節(jié)中的示例說明了,當您對于?Internet?Explorer?6?或更高版本在文檔中使用?!DOCTYPE?聲明打開符合標準的模式時,相同?HTML?元素是如何以不同方式呈現(xiàn)的。
下面?HTML?代碼片段中?DIV?元素的?width?和?height?均為?200?像素,border-width?為?50?像素。當您單擊該代碼片段后面的按鈕時,會啟動一個帶有兩個?IFRAME?元素的文檔。左側(cè)?IFRAME?元素所指定文檔包含的?!DOCTYPE?聲明會為?Internet?Explorer?6?或更高版本打開符合標準的模式。右側(cè)?IFRAME?元素所指定文檔包含的?!DOCTYPE?聲明則不會打開符合標準的模式。右側(cè)的?IFRAME?元素還顯示了?DIV?元素在更早版本?Internet?Explorer?中的呈現(xiàn)方式。
<div?style="width:200px;??height:200px;???
??????border-width:50px;??border-style:solid">??
??????Hi?kids.?Daddy?will?be?home?soon.??I?love?you?both!
</div>
請顯示該示例。
TABLE?元素
對于更早版本的?Internet?Explorer,CSS1?框模型語義用于計算自動布局表中?TD?和?TH?元素的?width?屬性,但是不用于計算這些元素的?height?屬性。在更早版本的?Internet?Explorer?中,固定布局表不使用?CSS1?語義。
注默認情況下為自動布局表。要創(chuàng)建固定布局表,請將TABLE?元素的?table-layout?屬性設(shè)置為?fixed。固定布局表的優(yōu)點在于,它們的呈現(xiàn)速度比自動布局表的呈現(xiàn)速度快。
IMG?元素
CSS1?框模型語義在更早版本的?Internet?Explorer?中還用于計算?IMG?元素的?width?和?height?屬性。但是,padding?不適用于更早版本?Internet?Explorer?中的?IMG?元素。
返回頁首
誰移動了我的畫布?
本節(jié)講述了在?!DOCTYPE?聲明為?Internet?Explorer?6?或更高版本打開符合標準的模式的情況下,BODY?和?HTML?元素的呈現(xiàn)方式有哪些區(qū)別。
在更早版本的?Internet?Explorer?中,BODY?元素表示畫布?—?文檔內(nèi)容可在其中呈現(xiàn)的整個表面。BODY?元素的大小不能更改,它等于窗口的大小。針對此元素設(shè)置的邊距呈現(xiàn)在該元素的邊框和滾動條之內(nèi)。
從?Internet?Explorer?6?開始,當您使用?!DOCTYPE?聲明打開符合標準的模式時,BODY?元素可以從其內(nèi)容獲取其大小,也可以顯式設(shè)置其大小?—?ày如,像?DIV?對象一樣。在符合標準的模式中,HTML?元素表示畫布。
當您打開符合標準的模式時,HTML?元素還會成為定位容器,用于那些沒有定位父元素的定位元素。關(guān)閉符合標準的模式時的情況與更早版本的?Internet?Explorer?一樣,如果沒有定位父元素,則會相對于?BODY?定位一個絕對定位元素。關(guān)閉符合標準的模式時,BODY?元素表示畫布,這一點與更早版本的?Internet?Explorer?也一樣。
滾動條
SCROLL?屬性會設(shè)置或檢索一個值,該值指示是否打開元素的滾動條。對于?Internet?Explorer?6?或更高版本,當您使用?!DOCTYPE?聲明打開符合標準的模式時,此屬性則會應用到?HTML?元素。符合標準的模式關(guān)閉時的情況與更早版本?Internet?Explorer?一樣,此屬性應用于?BODY?元素,而不會應用于?HTML?元素。
注打開符合標準的模式時,可用于管理超過其容器大小的內(nèi)容的overflow、overflow-x?和?overflow-y?屬性會應用于?HTML?元素。
單獨的背景
您可以為?HTML?和?BODY?元素指定單獨的?background?屬性。打開符合標準的模式時,兩個背景會同時清楚呈現(xiàn)。這樣有助于解決一個常見問題?—?background?屬性通常在?BODY?元素上定義,但是?BODY?具有默認邊距,因此導致在?BODY?元素內(nèi)容周圍只會顯示一個很窄的區(qū)域。
下面的示例說明了,當您對于?Internet?Explorer?6?或更高版本在文檔中使用?!DOCTYPE?聲明打開符合標準的模式時,相同?HTML?元素如何以不同的方式進行呈現(xiàn)。HTML?元素具有紅色背景,BODY?元素指定了高度和寬度。只有在打開符合標準的模式時,您才能看到這些屬性的效果。沒有打開符合標準的模式時,BODY?元素會充滿該窗口,從而使您無法看到?HTML?元素的背景。當您單擊該代碼片段后面的按鈕時,會啟動一個帶有兩個?IFRAME?元素的文檔。左側(cè)?IFRAME?元素所指定文檔包含的?!DOCTYPE?聲明會為?Internet?Explorer?6?或更高版本打開符合標準的模式。右側(cè)?IFRAME?元素所指定文檔包含的?!DOCTYPE?聲明則不會打開符合標準的模式。右側(cè)的?IFRAME?元素還顯示了?DIV?元素在更早版本?Internet?Explorer?中的呈現(xiàn)方式。
<html?style="background:red">
??<head>
????<title>Canvas?Comparison</title>
??</head>
??<body?style="background:blue;?width:200px;?height:150px">
????<div?style="background:yellow">Who?moved?my?canvas?</div>
??</body>
</html>
注打開符合標準的模式時,如果沒有為?HTML?元素指定?background?屬性,BODY?元素的?background?則會成為?HTML?元素的?background。這種情況符合?CSS2。
返回頁首
其他屬性
本節(jié)講述了?Internet?Explorer?6?或更高版本中可用的兩個?CSS?屬性?—?min-height?和?word-spacing。
min-height?屬性
min-height?屬性會設(shè)置或檢索一個值,該值指定元素的最小高度。對于?Internet?Explorer?6,此屬性只應用于固定布局表中的?TD、TH?和?TR?元素。無論文檔中的?!DOCTYPE?聲明是否打開符合標準的模式,您都可以使用此屬性。
元素的?height?默認情況下設(shè)置為?auto。使用此默認設(shè)置時,元素的高度會進行動態(tài)調(diào)整。您可以使用?min-height?屬性來指定固定布局表中單元格或行的最小高度。
下面的代碼片段顯示了如何以聲明的方式設(shè)置?min-height?屬性。該固定布局表第一行的最小高度為?100?像素。
<table?style="table-layout:fixed">
??<tr?style="min-height:100px">
????<th>Row?1,?Cell?1</th>
????<th>Row?1,?Cell?2</th>
??</tr>
??<tr>
????<td>Row?2,?Cell?1</td>
????<td>Row?2,?Cell?2</td>
??</tr>
</table>
word-spacing?屬性
word-spacing?屬性從?Internet?Explorer?4.01?開始可在?Macintosh?上使用。從?Internet?Explorer?6?開始可在?Microsoft??Win32??上使用。此設(shè)置會設(shè)置或檢索元素中各個詞之間附加間隔的數(shù)量。它會在每個詞后面都添加一個指定數(shù)量的間隔,在這種情況下,可將某個詞定義為?Internet?Explorer?用來進行斷行的標志?—?如空格或連字符。您可以在任何文本容器中設(shè)置此屬性。
返回頁首
更多屬性值
本節(jié)列出了?Internet?Explorer?6?或更高版本所支持、但更早版本?Internet?Explorer?卻不支持的一些可能值。
margin?和?width?屬性的?auto?值
margin?和?width?屬性的?auto?值指定,當元素的寬度超過限制時(即樣式規(guī)則發(fā)生重疊或發(fā)生沖突時),調(diào)整這些屬性中的哪個屬性。當文檔中的?!DOCTYPE?聲明為?Internet?Explorer?6?或更高版本打開符合標準的模式時,您可以使用此值。
非浮動、塊級別元素的水平位置和寬度是由該元素的?margin,?border、padding?和?width?屬性指定的。對于任何這樣的元素,這些屬性(左和右)值的和都等于包含它的塊元素的寬度;寬度是從容器塊繼承的。
無法通過更改容器塊中元素的?margin、border、padding?或?width?屬性值,來更改這個容器塊的寬度。當您為某個元素的一個或多個這類元素指定值時,可能必須對其他屬性進行調(diào)整,這樣才能使得該元素的總寬度不會超過容器的寬度。該寬度可能會超出限制。
根據(jù)?CSS1,margin?和?width?值可以調(diào)整;border?和?padding?值不可調(diào)整。只有?margin?和?width?屬性可以為?auto。如果?width?屬性的指定值導致該元素的寬度超出限制,則可以調(diào)整其中一個?margin?屬性,如果一個或多個?margin?屬性導致該元素的寬度超出限制,則可以調(diào)整?width?屬性。
下面的規(guī)則決定了當元素寬度超出限制時,會調(diào)整哪個屬性。?
??如果?direction?屬性的值為?ltr,則會忽略為?margin-right?指定的值,該值會進行調(diào)整。如果?direction?的值為?rtl,則會調(diào)整?margin-left?屬性。?
?
??如果只有一個屬性的值為?auto,則會調(diào)整該屬性。?
?
??如果?width?設(shè)置為?auto,則任何其他?auto?值都變?yōu)?0,width?則采用所生成等式的結(jié)果。?
?
??如果?margin-left?和?margin-right?都為?auto,它們的計算值則相等。
?
Auto?示例
下面的示例說明了,當您對于?Internet?Explorer?6?或更高版本在文檔中使用?!DOCTYPE?聲明打開符合標準的模式時,相同元素如何以不同的方式進行呈現(xiàn)。
無論是否打開符合標準的模式,下列?HTML?代碼段中前三個?DIV?元素都以相同方式呈現(xiàn)。第一個?DIV?元素沒有指定?width?和?margin?屬性,因此它的?width?為?100%,而且沒有左邊距和右邊距。第二個?DIV?元素指定了?width?和?margin-left?屬性,因此會調(diào)整?margin-right?屬性。第三個?DIV?元素指定了?width?屬性,并且其?margin-right?屬性設(shè)置為?auto,因此會調(diào)整其?margin-right?屬性。
第四個和第五個?DIV?元素都指定了?width?屬性,并且它們的一個或多個?margin?屬性設(shè)置為?auto。只有打開符合標準的模式時,您才能看到這些屬性的效果。沒有打開符合標準的模式時,DIV?元素的呈現(xiàn)方式就好像它們的?margin-left?屬性設(shè)置為?0px,并且/或者它們的?margin-right?屬性設(shè)置為了?auto?一樣。
當您單擊該代碼片段后面的按鈕時,會啟動一個帶有兩個?IFRAME?元素的文檔。左側(cè)?IFRAME?元素所指定文檔包含的?!DOCTYPE?聲明會為?Internet?Explorer?6?或更高版本打開符合標準的模式。右側(cè)?IFRAME?元素所指定文檔包含的?!DOCTYPE?聲明則不會打開符合標準的模式。右側(cè)的?IFRAME?元素還顯示了?DIV?元素在更早版本?Internet?Explorer?中的呈現(xiàn)方式。
<body>
??<div?style=""></div>
??<div?style="width:50%;?margin-left:0px"></div>
??<div?style="width:50%;?margin-right:auto"></div>
??<div?style="width:50%;?margin-left:auto"></div>
??<div?style="width:50%;?margin-left:auto;?margin-right:auto"></div>
</body>
display?屬性的?list-item?值
display?屬性使您能夠控制元素的基本形狀或類型,以及是否呈現(xiàn)這些元素。display?屬性的?list-item?值使您能夠?qū)⑷魏卧囟甲優(yōu)橐粋€列表項,即一個帶有列表標記的塊級元素。其?display?屬性設(shè)置為?list-item?的元素所支持的?CSS?屬性與?LI?元素支持的?CSS?屬性相同?—?就是說,除了應用于塊元素的普通屬性之外,還支持下列屬性:list-style、list-style-type、list-style-image?和?list-style-position。
LI?元素的編號語義與其他?display?屬性設(shè)置為?list-item?的塊元素的編號語義不同。LI?元素會離從它們最近的容器?OL?或?UL?元素獲取其索引。其他塊元素則從它們父元素的?children?集合獲取其索引。對?display?屬性的?list-item?值的支持不會更改?LI?元素的索引。
無論是否打開符合標準的模式,此值都可用。
white-space?屬性的?pre?值
white-space?屬性使您能夠控制元素中的空格和換行符。對于?Internet?Explorer?6?或更高版本,當您使用?!DOCTYPE?聲明打開符合標準的模式時,pre?值會導致源中的空格和換行符被保留。源中的換行符和?TAB?字符(“/n”和“/t”)也會被保留。連續(xù)的空格不會進行重疊。此值會導致某個對象中內(nèi)容的布局方式與?PRE?元素非常類似。此值不僅影響內(nèi)容的顯示,而且會影響通過?W3C?Document?Object?Model?(DOM)?訪問的內(nèi)容。
關(guān)閉符合標準的模式時,您可以檢索此值,而不會影響呈現(xiàn)。它的運行方式與?normal?值類似。
注當您打開符合標準的模式時,white-space?屬性僅應用于塊級元素,如?DIV?元素。對于?Internet?Explorer?5.5,未打開符合標準的模式時,此屬性會應用到所有可見元素。
返回頁首
更嚴格的樣式表分析
本節(jié)列出了?Internet?Explorer?6?或更高版本在樣式表分析方式上的變化。
當您使用?!DOCTYPE?聲明打開符合標準的模式時,Internet?Explorer?6?或更高版本會忽略不符合?CSS1?的樣式表聲明。更早版本的?Internet?Explorer?允許您使用某些無效的聲明,如在一個十六進制?RGB?值的開頭遺漏了前導“#”符號。
樣式表中的注釋
根據(jù)?CSS1,您可以在樣式表中使用文本注釋,這種注釋與?C?編程語言中使用的注釋相似。C?語言注釋以“/*”開始,以“*/”結(jié)束。對于更早版本的?Internet?Explorer,您可以在樣式表中使用?C?語言注釋,也可以使用?HTML?注釋。HTML?注釋以“”結(jié)束。
下面的示例顯示了?C?語言注釋與?HTML?注釋的區(qū)別。
/*?Use?C?language?comment?blocks?like?this?in?your?style?sheets.?*/
<!--?Do?not?use?HTML?comments?like?this?in?your?style?sheets.?-->
當您使用文檔中的?!DOCTYPE?聲明打開符合標準的模式時,對于?Internet?Explorer?6?或更高版本,只允許?C?語言注釋,但是有一點例外。那就是,您可以將樣式表規(guī)則包含在一個?HTML?注釋中。樣式表可以包含在?HTML?注釋塊中,這樣是為了讓低級別的瀏覽器不會顯示樣式表中的文本。下面的示例演示了?HTML?注釋在一個嵌入式樣式表中唯一可接受的用法。
<style>
<!--
??/*?begin?rules?*/
??H1.blue??{?background-color:blue?}
??.
??.
??.
??/*?end?rules?*/
-->
</style>
速記屬性中的不可識別標記
根據(jù)?CSS1,當一個速記屬性中存在不可識別標記時,整個速記屬性設(shè)置都會被忽略。例如,"text-decoration:?underline?cross-out"?會被忽略,這就是因為“cross-out”是?text-decoration?屬性的不可識別值。文本甚至不會添加下劃線。
對于更早版本的?Internet?Explorer,聲明的分析在遇到第一個不可識別值時結(jié)束。因此,"text-decoration:?underline?cross-out?overline"?可以使得文本添加下劃線,但是不會添加上劃線。上述情況會影響下列屬性:font、background、background-position、text-decoration、margin、padding、border、border-top、border-right、border-bottom、border-left、border-color、border-width、border-style、list-style-image、list-style、clip、behavior、text-autospace?和?layout-grid。
部分字體屬性設(shè)置
根據(jù)?CSS1,font?聲明必須至少指定?font-size?和?font-family。例如,因為?"font:?14pt"?雖然具有?font-size,但是沒有?font-family,所以它會被忽略。更早版本的?Internet?Explorer?接受部分字體設(shè)置。
RGB?顏色缺少“#”字符
根據(jù)?CSS1,使用十六進制?RGB?值指定的顏色必須帶有一個前導“#”符號。與更早版本的?Internet?Explorer?一樣,像?"FFFFFF"?這樣的值會被忽略,而不會將其按照?"#FFFFFF"?進行處理(也稱為?white)。上述情況會影響接受顏色值的所有屬性。
缺少單位類型標識符會被視為像素值
根據(jù)?CSS1,長度值必須指定一個單元類型標識符,如?cm、mm、in、pt、pc?或?px。不帶單位類型標識符的值,以及數(shù)字和單位類型標識符之間存在空格的值會被忽略。更早版本的?Internet?Explorer?會將不帶任何單位類型標識符的數(shù)字視為像素單位?—?就好像在該字符串后面附加了“px”一樣。?
在下面的示例中,當?!DOCTYPE?聲明打開符合標準的模式時,兩個屬性都會被忽略。第一個屬性之所以被忽略,是因為沒有單位屬性標識符。第二個屬性被忽略則是因為數(shù)字和單位類型標識符之間存在空格。更早版本的?Internet?Explorer?處理第一個屬性的方式就好像該數(shù)字后面附加了“px”一樣。第二個屬性中數(shù)字和單位類型標識符之間的空格會被更早版本的?Internet?Explorer?忽略。
DIV.Rachel?{?width:?817;?height:?11?cm;?}
注此規(guī)則有一個例外。line-height?會顯式接受不帶單位的數(shù)字,并且將其按照與百分比設(shè)置相似的方式進行處理。例如,"line-height:?2"?與?"line-height:?200%,"?相似,只是數(shù)字繼承方式有所區(qū)別。
帶引號的關(guān)鍵字
根據(jù)?CSS1,樣式表中的關(guān)鍵字標記不能加引號,例如,按名稱指定的顏色(如?"red,")或已知屬性值(如?"small-caps,")。在下面的示例中,這兩個屬性都會被忽略。更早版本的?Internet?Explorer?會忽略引號,并應用這些關(guān)鍵字標記。
DIV.George?{?color:?"red";?font-variant:?"small-caps";}
注腳本語言在字符串兩邊仍然需要加引號。
以數(shù)字開頭的?CLASS?和?ID?值
根據(jù)?CSS1,CLASS?或?ID?屬性的值不能以數(shù)字?(0-9)?開頭。更早版本的?Internet?Explorer?允許這些值以數(shù)字開頭。
區(qū)分大小寫的?CLASS?和?ID?值
根據(jù)?HTML?4.0,CLASS?和?ID?屬性的值區(qū)分大小寫。
返回頁首
還有更多的新功能呢
對于?Internet?Explorer?6?或更高版本,當您使用?!DOCTYPE?聲明打開符合標準的模式時,某些功能的運行方式與其在更早版本的?Internet?Explorer?中的運行方式不同。本節(jié)列出了這些功能。
font-variant?屬性的?small-caps?值
font-variant?屬性的?small-caps?值會產(chǎn)生“小體大寫字母”的效果。該元素中的所有字母均大寫,原始文本中本來為小寫的字母會比原來為大寫的字母小。在更早版本的?Internet?Explorer?中,small-caps?值則對該元素中的所有字符均應用相同的字體大小。
IMG?元素上的填充
在?IMG?元素上支持填充屬性,如?padding、padding-bottom、padding-top、padding-left?和?padding-right。更早版本的?Internet?Explorer?不支持?IMG?元素的?padding?屬性。
Font-size?屬性的關(guān)鍵字值
font-size?屬性的?medium?值與默認的普通字體大小相匹配。
此屬性的關(guān)鍵字值包括?xx-small、x-small、small、medium、large、x-large?和?xx-large。對于更早版本的?Internet?Explorer,這些值不是直觀定義的。medium?值不是默認的普通字體大小;默認為?small。
TABLE?元素繼承文本屬性
TABLE?元素會從其父元素繼承文本屬性值。這些屬性包括?color、font-size、font-weight、font-style、font-variant、text-decoration、text-transform、letter-spacing?和?line-height。對于更早版本的?Internet?Explorer,除?font-family?屬性之外的?TABLE?元素的所有文本屬性會將所有文本屬性設(shè)置為?BODY?元素的設(shè)置。
注?TABLE元素的?font-family?屬性在?Internet?Explorer?3?及更高版本中會進行繼承。
嵌入式元素的寬度和高度
嵌入式元素(如?SPAN、B?和?I)不支持?width?或?height?屬性。打開符合標準的模式時,如果您想設(shè)置嵌入式元素的?width?或?height?屬性,則必須將該元素的?display?屬性設(shè)置為?inline-block。
字符轉(zhuǎn)義
根據(jù)?CSS1,您可以使用反斜杠?(/)?作為轉(zhuǎn)義符。這樣會使得轉(zhuǎn)義符后面的字符失去任何意義。例如,您可以按照下列方式轉(zhuǎn)義引號字符:
STYLE="font-family:'Rachel/'s?font'"
您還可以使用十六進制值轉(zhuǎn)義?Unicode?字符。例如,“/0009”是?tab?字符的轉(zhuǎn)義符。
返回頁首
原來怎樣
本節(jié)可幫助您讓應用程序能夠在所有版本?Internet?Explorer?é?都得以正確呈現(xiàn)。?
當?Internet?Explorer?6?或更高版本未處于符合標準的模式時,它處于兼容性?模式。如果您針對更早版本的?Internet?Explorer?開發(fā)了應用程序,并且希望這些應用程序在?Internet?Explorer?6?或更高版本上以相同方式呈現(xiàn),則請確保?!DOCTYPE?聲明沒有打開符合標準的模式。
在符合標準的模式中,不能保證與其他版本?Internet?Explorer?的兼容性。打開符合標準的模式時,文檔的呈現(xiàn)行為可能與將來版本的?Internet?Explorer?不同。對于性質(zhì)固定的內(nèi)容(如存儲在?CD?上的內(nèi)容),您不應該使用此模式。
原文地址: http://www.microsoft.com/china/MSDN/library/NetComm/webteam08062001.mspx
Microsoft??Internet?Explorer?6?及更高版本支持一些更早版本?Internet?Explorer?并不支持的?CSS?功能。支持的兩個附加?CSS?屬性為?min-height?和?word-spacing。還支持幾個其他的可能值,其中包括?white-space?屬性的?pre?值,以及?display?屬性的?list-item?值。其他重要功能包括更加嚴格的樣式表分析,以及更改哪些?HTML?元素可以表示文檔內(nèi)容可呈現(xiàn)到其中的最外部表面。
這些增強功能設(shè)計為符合?CSS?規(guī)范。CSS?中定義的所有屬性、值和功能,以及?Level?1?(CSS1)?規(guī)范均受支持,其中包括定義如何對元素及其相關(guān)?margin、border?和?padding?屬性進行度量和格式設(shè)置的框模型。
但真正的優(yōu)點在于,即使有了所有這些增強功能,也不會與您為更早版本?Internet?Explorer?開發(fā)的應用程序之間出現(xiàn)任何明顯的兼容性問題。
返回頁首
!DOCTYPE“開關(guān)”
本節(jié)說明對于?Internet?Explorer?6?或更高版本而言,如何在文檔中使用?!DOCTYPE?聲明來打開符合標準的模式。
!DOCTYPE?聲明是一個標準通用標記語言?(SGML)?聲明,它指定了文檔(理論上)遵守的文檔類型定義?(DTD)。它看起來像一個不帶結(jié)束標記的?HTML?標記,但是它以一個驚嘆號?(!)?開頭,并且包含的只是單個標記,而不是屬性名稱值對。此聲明必須位于文檔的開頭,且在?HTML?標記的前面。
通過在文檔開頭部分包括?!DOCTYPE?聲明,并在該聲明中指定一個有效的?Label(在某些情況下還會指定?Definition?和/或?URL),可以打開符合標準的模式。Label?指定?DTD?的唯一名稱,后面可以附加該?DTD?的版本號。Definition?指定在?Label?中所指定的?DTD?的定義。URL?則指定該?DTD?的位置。
在?HTML?4.0?規(guī)范中指定了三個?Definition?—?Frameset、Transitional?和?Strict。Frameset?用于?FRAMESET?文檔,Transitional?包含了除?FRAMESET?文檔之外的所有文檔,Strict?“排除了萬維網(wǎng)聯(lián)合會?(W3C)?預期將隨著樣式表支持的成熟而逐漸棄用的表示屬性和元素”£¨HTML?4.0?規(guī)范的說法)。
下表顯示了對于?Internet?Explorer?6?或更高版本,!DOCTYPE?聲明的哪些值會打開符合標準的模式。
Label?Definition?存在?URL?不存在?URL?
不存在?!DOCTYPE
??關(guān)
?關(guān)
?
HTML(不存在?Version)
??關(guān)
?關(guān)
?
HTML?2.0
??關(guān)
?關(guān)
?
HTML?3.0
??關(guān)
?關(guān)
?
HTML?3.2
??關(guān)
?關(guān)
?
HTML?4.0
?不存在?Definition
?開
?開
?
HTML?4.0
?Frameset
?開
?關(guān)
?
HTML?4.0
?Transitional
?開
?關(guān)
?
HTML?4.0
?Strict
?開
?開
?
XHTML
??開
?開
?
XML
?開?開
?開
?
無法識別的?!DOCTYPE
??開
?開
?
前面的表顯示出,當文檔不存在?!DOCTYPE?聲明時,當聲明中的?Label?不指定?HTML?規(guī)范版本時,或者它指定的版本早于?HTML?4.0?時,符合標準的模式是關(guān)閉的。該表顯示出,如果您在?!DOCTYPE?聲明中指定了?HTML?4.0?的?Frameset?或?Transitional?Definition,則只有當您包括?URL?時才會打開符合標準的模式。當您在?!DOCTYPE?聲明中指定?HTML?4.0?的?Strict?Definition,以及指定不帶任何?Definition?的?HTML?4.0?時,也會打開符合標準的模式。
為了允許創(chuàng)建新的?DTD(如?HiDad?11.22),當?!DOCTYPE?聲明不可識別時,會打開符合標準的模式。當您指定了上表沒有列出的?HTML?版本(如?HTML?1.0?或?HTML?3.22)時,也會打開符合標準的模式。
!DOCTYPE?示例
本節(jié)中的示例顯示了如何使用?!DOCTYPE?聲明來指定文檔要遵守的?DTD,以及如何打開符合標準的模式。
下面示例中的兩個聲明都指定為遵守?Transitional?HTML4.0?DTD。第二個聲明指定了該?DTD?的?URL。第一個聲明則沒有指定該內(nèi)容。第二個聲明對于?Internet?Explorer?6?或更高版本打開了符合標準的模式。第一個聲明則沒有打開該模式。
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN">
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN"?
????" http://www.w3.org/TR/html4/loose.dtd">
下面示例中的兩個聲明都指定為遵守?HTML?4.0?DTD。第一個聲明沒有指定?Definition。第二個聲明指定了此?DTD?的?Strict?Definition。兩個聲明都沒有指定?URL.。兩個聲明都打開了符合標準的模式。
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0//EN">
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Strict//EN">
返回頁首
在框內(nèi)部完成一切任務
本節(jié)講述了當您使用?!DOCTYPE?聲明打開符合標準的模式時,Internet?Explorer?6?或更高版本計算元素的?width?和?height?屬性的方式,還講述了這種方式與更早版本?Internet?Explorer?屬性計算方式的區(qū)別。
CSS1?框模型將內(nèi)容定義在一個?HTML?元素中,就好像它周圍有一個不可見的矩形邊框一樣。這個邊框周圍有三個矩形地帶,分別以?margin、border?和?padding?屬性表示。您可以使用樣式表來對該邊框及其周圍地帶的大小和外觀進行操作。
更早版本的?Internet?Explorer?計算?width?和?height?屬性的方式不遵守?CSS1?框模型。在?CSS1?中,width?屬性定義為元素內(nèi)容周圍左邊框和右邊框之間的距離。與之相似,height?屬性在?CSS1?中則定義為上邊框和下邊框之間的距離。然而,對于更早版本的?Internet?Explorer,width?和?height?屬性還包括該元素邊框周圍的?border?和?padding?地帶。下圖說明了這個區(qū)別。
圖?1.?Internet?Explorer?6?與更早版本間?width?和?height?屬性計算方式的區(qū)別的圖示說明
符合的行為
對于?Internet?Explorer?6?或更高版本而言,當您使用?!DOCTYPE?聲明打開符合標準的模式時,width?和?height?屬性分別指定左、右邊框,以及上、下邊框之間的距離。不包括?border?和?padding?地帶。
不符合的行為
當?!DOCTYPE?聲明沒有打開符合標準的模式時,正如更早版本的?Internet?Explorer?一樣,width?屬性包括該對象的內(nèi)容框,加上下列屬性的值:border-left、border-right、padding-left?和?padding-right。width?屬性值減去這些屬性值的和,等于父對象內(nèi)容框的寬度。與之相似,height?屬性值減去?border-top、border-bottom、padding-top?和?padding-bottom?屬性值的和,等于父對象內(nèi)容框的高度。
框模型示例
本節(jié)中的示例說明了,當您對于?Internet?Explorer?6?或更高版本在文檔中使用?!DOCTYPE?聲明打開符合標準的模式時,相同?HTML?元素是如何以不同方式呈現(xiàn)的。
下面?HTML?代碼片段中?DIV?元素的?width?和?height?均為?200?像素,border-width?為?50?像素。當您單擊該代碼片段后面的按鈕時,會啟動一個帶有兩個?IFRAME?元素的文檔。左側(cè)?IFRAME?元素所指定文檔包含的?!DOCTYPE?聲明會為?Internet?Explorer?6?或更高版本打開符合標準的模式。右側(cè)?IFRAME?元素所指定文檔包含的?!DOCTYPE?聲明則不會打開符合標準的模式。右側(cè)的?IFRAME?元素還顯示了?DIV?元素在更早版本?Internet?Explorer?中的呈現(xiàn)方式。
<div?style="width:200px;??height:200px;???
??????border-width:50px;??border-style:solid">??
??????Hi?kids.?Daddy?will?be?home?soon.??I?love?you?both!
</div>
請顯示該示例。
TABLE?元素
對于更早版本的?Internet?Explorer,CSS1?框模型語義用于計算自動布局表中?TD?和?TH?元素的?width?屬性,但是不用于計算這些元素的?height?屬性。在更早版本的?Internet?Explorer?中,固定布局表不使用?CSS1?語義。
注默認情況下為自動布局表。要創(chuàng)建固定布局表,請將TABLE?元素的?table-layout?屬性設(shè)置為?fixed。固定布局表的優(yōu)點在于,它們的呈現(xiàn)速度比自動布局表的呈現(xiàn)速度快。
IMG?元素
CSS1?框模型語義在更早版本的?Internet?Explorer?中還用于計算?IMG?元素的?width?和?height?屬性。但是,padding?不適用于更早版本?Internet?Explorer?中的?IMG?元素。
返回頁首
誰移動了我的畫布?
本節(jié)講述了在?!DOCTYPE?聲明為?Internet?Explorer?6?或更高版本打開符合標準的模式的情況下,BODY?和?HTML?元素的呈現(xiàn)方式有哪些區(qū)別。
在更早版本的?Internet?Explorer?中,BODY?元素表示畫布?—?文檔內(nèi)容可在其中呈現(xiàn)的整個表面。BODY?元素的大小不能更改,它等于窗口的大小。針對此元素設(shè)置的邊距呈現(xiàn)在該元素的邊框和滾動條之內(nèi)。
從?Internet?Explorer?6?開始,當您使用?!DOCTYPE?聲明打開符合標準的模式時,BODY?元素可以從其內(nèi)容獲取其大小,也可以顯式設(shè)置其大小?—?ày如,像?DIV?對象一樣。在符合標準的模式中,HTML?元素表示畫布。
當您打開符合標準的模式時,HTML?元素還會成為定位容器,用于那些沒有定位父元素的定位元素。關(guān)閉符合標準的模式時的情況與更早版本的?Internet?Explorer?一樣,如果沒有定位父元素,則會相對于?BODY?定位一個絕對定位元素。關(guān)閉符合標準的模式時,BODY?元素表示畫布,這一點與更早版本的?Internet?Explorer?也一樣。
滾動條
SCROLL?屬性會設(shè)置或檢索一個值,該值指示是否打開元素的滾動條。對于?Internet?Explorer?6?或更高版本,當您使用?!DOCTYPE?聲明打開符合標準的模式時,此屬性則會應用到?HTML?元素。符合標準的模式關(guān)閉時的情況與更早版本?Internet?Explorer?一樣,此屬性應用于?BODY?元素,而不會應用于?HTML?元素。
注打開符合標準的模式時,可用于管理超過其容器大小的內(nèi)容的overflow、overflow-x?和?overflow-y?屬性會應用于?HTML?元素。
單獨的背景
您可以為?HTML?和?BODY?元素指定單獨的?background?屬性。打開符合標準的模式時,兩個背景會同時清楚呈現(xiàn)。這樣有助于解決一個常見問題?—?background?屬性通常在?BODY?元素上定義,但是?BODY?具有默認邊距,因此導致在?BODY?元素內(nèi)容周圍只會顯示一個很窄的區(qū)域。
下面的示例說明了,當您對于?Internet?Explorer?6?或更高版本在文檔中使用?!DOCTYPE?聲明打開符合標準的模式時,相同?HTML?元素如何以不同的方式進行呈現(xiàn)。HTML?元素具有紅色背景,BODY?元素指定了高度和寬度。只有在打開符合標準的模式時,您才能看到這些屬性的效果。沒有打開符合標準的模式時,BODY?元素會充滿該窗口,從而使您無法看到?HTML?元素的背景。當您單擊該代碼片段后面的按鈕時,會啟動一個帶有兩個?IFRAME?元素的文檔。左側(cè)?IFRAME?元素所指定文檔包含的?!DOCTYPE?聲明會為?Internet?Explorer?6?或更高版本打開符合標準的模式。右側(cè)?IFRAME?元素所指定文檔包含的?!DOCTYPE?聲明則不會打開符合標準的模式。右側(cè)的?IFRAME?元素還顯示了?DIV?元素在更早版本?Internet?Explorer?中的呈現(xiàn)方式。
<html?style="background:red">
??<head>
????<title>Canvas?Comparison</title>
??</head>
??<body?style="background:blue;?width:200px;?height:150px">
????<div?style="background:yellow">Who?moved?my?canvas?</div>
??</body>
</html>
注打開符合標準的模式時,如果沒有為?HTML?元素指定?background?屬性,BODY?元素的?background?則會成為?HTML?元素的?background。這種情況符合?CSS2。
返回頁首
其他屬性
本節(jié)講述了?Internet?Explorer?6?或更高版本中可用的兩個?CSS?屬性?—?min-height?和?word-spacing。
min-height?屬性
min-height?屬性會設(shè)置或檢索一個值,該值指定元素的最小高度。對于?Internet?Explorer?6,此屬性只應用于固定布局表中的?TD、TH?和?TR?元素。無論文檔中的?!DOCTYPE?聲明是否打開符合標準的模式,您都可以使用此屬性。
元素的?height?默認情況下設(shè)置為?auto。使用此默認設(shè)置時,元素的高度會進行動態(tài)調(diào)整。您可以使用?min-height?屬性來指定固定布局表中單元格或行的最小高度。
下面的代碼片段顯示了如何以聲明的方式設(shè)置?min-height?屬性。該固定布局表第一行的最小高度為?100?像素。
<table?style="table-layout:fixed">
??<tr?style="min-height:100px">
????<th>Row?1,?Cell?1</th>
????<th>Row?1,?Cell?2</th>
??</tr>
??<tr>
????<td>Row?2,?Cell?1</td>
????<td>Row?2,?Cell?2</td>
??</tr>
</table>
word-spacing?屬性
word-spacing?屬性從?Internet?Explorer?4.01?開始可在?Macintosh?上使用。從?Internet?Explorer?6?開始可在?Microsoft??Win32??上使用。此設(shè)置會設(shè)置或檢索元素中各個詞之間附加間隔的數(shù)量。它會在每個詞后面都添加一個指定數(shù)量的間隔,在這種情況下,可將某個詞定義為?Internet?Explorer?用來進行斷行的標志?—?如空格或連字符。您可以在任何文本容器中設(shè)置此屬性。
返回頁首
更多屬性值
本節(jié)列出了?Internet?Explorer?6?或更高版本所支持、但更早版本?Internet?Explorer?卻不支持的一些可能值。
margin?和?width?屬性的?auto?值
margin?和?width?屬性的?auto?值指定,當元素的寬度超過限制時(即樣式規(guī)則發(fā)生重疊或發(fā)生沖突時),調(diào)整這些屬性中的哪個屬性。當文檔中的?!DOCTYPE?聲明為?Internet?Explorer?6?或更高版本打開符合標準的模式時,您可以使用此值。
非浮動、塊級別元素的水平位置和寬度是由該元素的?margin,?border、padding?和?width?屬性指定的。對于任何這樣的元素,這些屬性(左和右)值的和都等于包含它的塊元素的寬度;寬度是從容器塊繼承的。
無法通過更改容器塊中元素的?margin、border、padding?或?width?屬性值,來更改這個容器塊的寬度。當您為某個元素的一個或多個這類元素指定值時,可能必須對其他屬性進行調(diào)整,這樣才能使得該元素的總寬度不會超過容器的寬度。該寬度可能會超出限制。
根據(jù)?CSS1,margin?和?width?值可以調(diào)整;border?和?padding?值不可調(diào)整。只有?margin?和?width?屬性可以為?auto。如果?width?屬性的指定值導致該元素的寬度超出限制,則可以調(diào)整其中一個?margin?屬性,如果一個或多個?margin?屬性導致該元素的寬度超出限制,則可以調(diào)整?width?屬性。
下面的規(guī)則決定了當元素寬度超出限制時,會調(diào)整哪個屬性。?
??如果?direction?屬性的值為?ltr,則會忽略為?margin-right?指定的值,該值會進行調(diào)整。如果?direction?的值為?rtl,則會調(diào)整?margin-left?屬性。?
?
??如果只有一個屬性的值為?auto,則會調(diào)整該屬性。?
?
??如果?width?設(shè)置為?auto,則任何其他?auto?值都變?yōu)?0,width?則采用所生成等式的結(jié)果。?
?
??如果?margin-left?和?margin-right?都為?auto,它們的計算值則相等。
?
Auto?示例
下面的示例說明了,當您對于?Internet?Explorer?6?或更高版本在文檔中使用?!DOCTYPE?聲明打開符合標準的模式時,相同元素如何以不同的方式進行呈現(xiàn)。
無論是否打開符合標準的模式,下列?HTML?代碼段中前三個?DIV?元素都以相同方式呈現(xiàn)。第一個?DIV?元素沒有指定?width?和?margin?屬性,因此它的?width?為?100%,而且沒有左邊距和右邊距。第二個?DIV?元素指定了?width?和?margin-left?屬性,因此會調(diào)整?margin-right?屬性。第三個?DIV?元素指定了?width?屬性,并且其?margin-right?屬性設(shè)置為?auto,因此會調(diào)整其?margin-right?屬性。
第四個和第五個?DIV?元素都指定了?width?屬性,并且它們的一個或多個?margin?屬性設(shè)置為?auto。只有打開符合標準的模式時,您才能看到這些屬性的效果。沒有打開符合標準的模式時,DIV?元素的呈現(xiàn)方式就好像它們的?margin-left?屬性設(shè)置為?0px,并且/或者它們的?margin-right?屬性設(shè)置為了?auto?一樣。
當您單擊該代碼片段后面的按鈕時,會啟動一個帶有兩個?IFRAME?元素的文檔。左側(cè)?IFRAME?元素所指定文檔包含的?!DOCTYPE?聲明會為?Internet?Explorer?6?或更高版本打開符合標準的模式。右側(cè)?IFRAME?元素所指定文檔包含的?!DOCTYPE?聲明則不會打開符合標準的模式。右側(cè)的?IFRAME?元素還顯示了?DIV?元素在更早版本?Internet?Explorer?中的呈現(xiàn)方式。
<body>
??<div?style=""></div>
??<div?style="width:50%;?margin-left:0px"></div>
??<div?style="width:50%;?margin-right:auto"></div>
??<div?style="width:50%;?margin-left:auto"></div>
??<div?style="width:50%;?margin-left:auto;?margin-right:auto"></div>
</body>
display?屬性的?list-item?值
display?屬性使您能夠控制元素的基本形狀或類型,以及是否呈現(xiàn)這些元素。display?屬性的?list-item?值使您能夠?qū)⑷魏卧囟甲優(yōu)橐粋€列表項,即一個帶有列表標記的塊級元素。其?display?屬性設(shè)置為?list-item?的元素所支持的?CSS?屬性與?LI?元素支持的?CSS?屬性相同?—?就是說,除了應用于塊元素的普通屬性之外,還支持下列屬性:list-style、list-style-type、list-style-image?和?list-style-position。
LI?元素的編號語義與其他?display?屬性設(shè)置為?list-item?的塊元素的編號語義不同。LI?元素會離從它們最近的容器?OL?或?UL?元素獲取其索引。其他塊元素則從它們父元素的?children?集合獲取其索引。對?display?屬性的?list-item?值的支持不會更改?LI?元素的索引。
無論是否打開符合標準的模式,此值都可用。
white-space?屬性的?pre?值
white-space?屬性使您能夠控制元素中的空格和換行符。對于?Internet?Explorer?6?或更高版本,當您使用?!DOCTYPE?聲明打開符合標準的模式時,pre?值會導致源中的空格和換行符被保留。源中的換行符和?TAB?字符(“/n”和“/t”)也會被保留。連續(xù)的空格不會進行重疊。此值會導致某個對象中內(nèi)容的布局方式與?PRE?元素非常類似。此值不僅影響內(nèi)容的顯示,而且會影響通過?W3C?Document?Object?Model?(DOM)?訪問的內(nèi)容。
關(guān)閉符合標準的模式時,您可以檢索此值,而不會影響呈現(xiàn)。它的運行方式與?normal?值類似。
注當您打開符合標準的模式時,white-space?屬性僅應用于塊級元素,如?DIV?元素。對于?Internet?Explorer?5.5,未打開符合標準的模式時,此屬性會應用到所有可見元素。
返回頁首
更嚴格的樣式表分析
本節(jié)列出了?Internet?Explorer?6?或更高版本在樣式表分析方式上的變化。
當您使用?!DOCTYPE?聲明打開符合標準的模式時,Internet?Explorer?6?或更高版本會忽略不符合?CSS1?的樣式表聲明。更早版本的?Internet?Explorer?允許您使用某些無效的聲明,如在一個十六進制?RGB?值的開頭遺漏了前導“#”符號。
樣式表中的注釋
根據(jù)?CSS1,您可以在樣式表中使用文本注釋,這種注釋與?C?編程語言中使用的注釋相似。C?語言注釋以“/*”開始,以“*/”結(jié)束。對于更早版本的?Internet?Explorer,您可以在樣式表中使用?C?語言注釋,也可以使用?HTML?注釋。HTML?注釋以“”結(jié)束。
下面的示例顯示了?C?語言注釋與?HTML?注釋的區(qū)別。
/*?Use?C?language?comment?blocks?like?this?in?your?style?sheets.?*/
<!--?Do?not?use?HTML?comments?like?this?in?your?style?sheets.?-->
當您使用文檔中的?!DOCTYPE?聲明打開符合標準的模式時,對于?Internet?Explorer?6?或更高版本,只允許?C?語言注釋,但是有一點例外。那就是,您可以將樣式表規(guī)則包含在一個?HTML?注釋中。樣式表可以包含在?HTML?注釋塊中,這樣是為了讓低級別的瀏覽器不會顯示樣式表中的文本。下面的示例演示了?HTML?注釋在一個嵌入式樣式表中唯一可接受的用法。
<style>
<!--
??/*?begin?rules?*/
??H1.blue??{?background-color:blue?}
??.
??.
??.
??/*?end?rules?*/
-->
</style>
速記屬性中的不可識別標記
根據(jù)?CSS1,當一個速記屬性中存在不可識別標記時,整個速記屬性設(shè)置都會被忽略。例如,"text-decoration:?underline?cross-out"?會被忽略,這就是因為“cross-out”是?text-decoration?屬性的不可識別值。文本甚至不會添加下劃線。
對于更早版本的?Internet?Explorer,聲明的分析在遇到第一個不可識別值時結(jié)束。因此,"text-decoration:?underline?cross-out?overline"?可以使得文本添加下劃線,但是不會添加上劃線。上述情況會影響下列屬性:font、background、background-position、text-decoration、margin、padding、border、border-top、border-right、border-bottom、border-left、border-color、border-width、border-style、list-style-image、list-style、clip、behavior、text-autospace?和?layout-grid。
部分字體屬性設(shè)置
根據(jù)?CSS1,font?聲明必須至少指定?font-size?和?font-family。例如,因為?"font:?14pt"?雖然具有?font-size,但是沒有?font-family,所以它會被忽略。更早版本的?Internet?Explorer?接受部分字體設(shè)置。
RGB?顏色缺少“#”字符
根據(jù)?CSS1,使用十六進制?RGB?值指定的顏色必須帶有一個前導“#”符號。與更早版本的?Internet?Explorer?一樣,像?"FFFFFF"?這樣的值會被忽略,而不會將其按照?"#FFFFFF"?進行處理(也稱為?white)。上述情況會影響接受顏色值的所有屬性。
缺少單位類型標識符會被視為像素值
根據(jù)?CSS1,長度值必須指定一個單元類型標識符,如?cm、mm、in、pt、pc?或?px。不帶單位類型標識符的值,以及數(shù)字和單位類型標識符之間存在空格的值會被忽略。更早版本的?Internet?Explorer?會將不帶任何單位類型標識符的數(shù)字視為像素單位?—?就好像在該字符串后面附加了“px”一樣。?
在下面的示例中,當?!DOCTYPE?聲明打開符合標準的模式時,兩個屬性都會被忽略。第一個屬性之所以被忽略,是因為沒有單位屬性標識符。第二個屬性被忽略則是因為數(shù)字和單位類型標識符之間存在空格。更早版本的?Internet?Explorer?處理第一個屬性的方式就好像該數(shù)字后面附加了“px”一樣。第二個屬性中數(shù)字和單位類型標識符之間的空格會被更早版本的?Internet?Explorer?忽略。
DIV.Rachel?{?width:?817;?height:?11?cm;?}
注此規(guī)則有一個例外。line-height?會顯式接受不帶單位的數(shù)字,并且將其按照與百分比設(shè)置相似的方式進行處理。例如,"line-height:?2"?與?"line-height:?200%,"?相似,只是數(shù)字繼承方式有所區(qū)別。
帶引號的關(guān)鍵字
根據(jù)?CSS1,樣式表中的關(guān)鍵字標記不能加引號,例如,按名稱指定的顏色(如?"red,")或已知屬性值(如?"small-caps,")。在下面的示例中,這兩個屬性都會被忽略。更早版本的?Internet?Explorer?會忽略引號,并應用這些關(guān)鍵字標記。
DIV.George?{?color:?"red";?font-variant:?"small-caps";}
注腳本語言在字符串兩邊仍然需要加引號。
以數(shù)字開頭的?CLASS?和?ID?值
根據(jù)?CSS1,CLASS?或?ID?屬性的值不能以數(shù)字?(0-9)?開頭。更早版本的?Internet?Explorer?允許這些值以數(shù)字開頭。
區(qū)分大小寫的?CLASS?和?ID?值
根據(jù)?HTML?4.0,CLASS?和?ID?屬性的值區(qū)分大小寫。
返回頁首
還有更多的新功能呢
對于?Internet?Explorer?6?或更高版本,當您使用?!DOCTYPE?聲明打開符合標準的模式時,某些功能的運行方式與其在更早版本的?Internet?Explorer?中的運行方式不同。本節(jié)列出了這些功能。
font-variant?屬性的?small-caps?值
font-variant?屬性的?small-caps?值會產(chǎn)生“小體大寫字母”的效果。該元素中的所有字母均大寫,原始文本中本來為小寫的字母會比原來為大寫的字母小。在更早版本的?Internet?Explorer?中,small-caps?值則對該元素中的所有字符均應用相同的字體大小。
IMG?元素上的填充
在?IMG?元素上支持填充屬性,如?padding、padding-bottom、padding-top、padding-left?和?padding-right。更早版本的?Internet?Explorer?不支持?IMG?元素的?padding?屬性。
Font-size?屬性的關(guān)鍵字值
font-size?屬性的?medium?值與默認的普通字體大小相匹配。
此屬性的關(guān)鍵字值包括?xx-small、x-small、small、medium、large、x-large?和?xx-large。對于更早版本的?Internet?Explorer,這些值不是直觀定義的。medium?值不是默認的普通字體大小;默認為?small。
TABLE?元素繼承文本屬性
TABLE?元素會從其父元素繼承文本屬性值。這些屬性包括?color、font-size、font-weight、font-style、font-variant、text-decoration、text-transform、letter-spacing?和?line-height。對于更早版本的?Internet?Explorer,除?font-family?屬性之外的?TABLE?元素的所有文本屬性會將所有文本屬性設(shè)置為?BODY?元素的設(shè)置。
注?TABLE元素的?font-family?屬性在?Internet?Explorer?3?及更高版本中會進行繼承。
嵌入式元素的寬度和高度
嵌入式元素(如?SPAN、B?和?I)不支持?width?或?height?屬性。打開符合標準的模式時,如果您想設(shè)置嵌入式元素的?width?或?height?屬性,則必須將該元素的?display?屬性設(shè)置為?inline-block。
字符轉(zhuǎn)義
根據(jù)?CSS1,您可以使用反斜杠?(/)?作為轉(zhuǎn)義符。這樣會使得轉(zhuǎn)義符后面的字符失去任何意義。例如,您可以按照下列方式轉(zhuǎn)義引號字符:
STYLE="font-family:'Rachel/'s?font'"
您還可以使用十六進制值轉(zhuǎn)義?Unicode?字符。例如,“/0009”是?tab?字符的轉(zhuǎn)義符。
返回頁首
原來怎樣
本節(jié)可幫助您讓應用程序能夠在所有版本?Internet?Explorer?é?都得以正確呈現(xiàn)。?
當?Internet?Explorer?6?或更高版本未處于符合標準的模式時,它處于兼容性?模式。如果您針對更早版本的?Internet?Explorer?開發(fā)了應用程序,并且希望這些應用程序在?Internet?Explorer?6?或更高版本上以相同方式呈現(xiàn),則請確保?!DOCTYPE?聲明沒有打開符合標準的模式。
在符合標準的模式中,不能保證與其他版本?Internet?Explorer?的兼容性。打開符合標準的模式時,文檔的呈現(xiàn)行為可能與將來版本的?Internet?Explorer?不同。對于性質(zhì)固定的內(nèi)容(如存儲在?CD?上的內(nèi)容),您不應該使用此模式。
原文地址: http://www.microsoft.com/china/MSDN/library/NetComm/webteam08062001.mspx
總結(jié)
以上是生活随笔為你收集整理的Internet Explorer 6 中的 CSS 增强功能的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 3DSlicer14:Loadable
- 下一篇: 3DSlicer15:Scripted