【精品】淺談CSS在IE6、7、8中的差別

1、css在i nternet explorer 6, 7和8中的差別，相信對你有所幫助。關(guān)于瀏覽器的最離奇的統(tǒng)計(jì)結(jié)果之一就是internet explorer版本6, 7和8共存。截至本文，internet explorer各個版本總共占據(jù)了大約65%的市場份額。在網(wǎng)站開發(fā)社區(qū)，這個數(shù)字耍小很多,統(tǒng)計(jì)顯示大概只有40%。windows*in ternetexplorer8win dows*internet explorer?這些統(tǒng)計(jì)中比較有趣的部分是 ie6、ie7、ie8之間的數(shù)值很接近，這防止了單個microsoft的瀏覽器占居統(tǒng)治地位一一與過去 的情況相反。根據(jù)這些令人遺憾的統(tǒng)計(jì)結(jié)果，在為

2、客戶開發(fā)網(wǎng)站的時候開發(fā)人員對所有當(dāng)前使用的ie瀏覽器做全面的測試是必要的， 而且這樣在個人項(xiàng)目上也可以拉攏更多的用戶。多謝那些javascript庫（框架），跨瀏覽器的javascript的測試已經(jīng)像當(dāng)詢形勢所允許的那樣接近完美了。但在css開發(fā)中還 不是這樣，特別是關(guān)系到ie目前存在的三個版本。本文嘗試為希望了解css對ie6. ie7. ie8的支持的不同的開發(fā)者提供-份詳細(xì)的、易用的參考。本參考包含以下悄況的概述 和兼容情況：三個瀏覽器中的一個支持而另外兩個不支持的條目三個瀏覽器中的兩個支持而另外一個不支持的條目本文不討論：個瀏覽器都不支持的條h因此.木文的中心是三個瀏覽器中的彳何 而不

3、是必要的支持缺陷。該列農(nóng)被分為以下五個部分：選擇器與繼承偽類與偽元索厲性支持其它各種技術(shù)重要bug和不兼容問題選擇器與繼承子選擇器示例body > p color:#fff;描述子選擇器選擇一個特定父級元素的所有宜接子級元素，在上面的例子中，body是父元索，p是子元素。支持情況ie6noie7yesie8yesbugsie7中，如果在父級標(biāo)簽和子級標(biāo)簽之間有一個html注釋，子選擇器將不會工作。鏈類示例.classl.class2.class3background:#fff;描述鏈類用于送一個html元素有多個class聲明的情況.就像這樣：<divclass=nclassl c

4、lass2class3"><p>content here</p></div>支持情況ie6noie7yesie8yesbugsie6好像支持這種情況，因?yàn)樗芷ヅ滏溨械淖詈笠粋€class到使用該class的元素上，然而.它并不能限制一個使用鏈中所有class的元索。屬性選擇器示例a hrefcolor:#ofo;描述該選擇器允許一個元索彼定位只耍它有扌旨定的加性。在上面的例子中.所有的帶有href m性的a標(biāo)簽都會被限定，而沒有href屈性的a標(biāo)簽不會被限定。支持情況ie6noie7yesie8yes臨近兄弟選擇器示例hl+p color:#

5、f00;描述該選擇器定位臨近到指定元索的兄弟標(biāo)簽上面的例子將會限定p標(biāo)簽,但是他必須是hi標(biāo)簽的兄弟而且耍直接尾隨在hi標(biāo) 簽的后面。比如：<hl>heading</hl><p>content here</p><p>content here</p>在上面的代碼中.css樣式將只對第一個p有效。因?yàn)樗莌i的兄弟而且緊hi.笫二個p也是hi的一個兄弟，但是它 沒有緊跟<h1.支持情況ie6noie7yesie8yesbugs在ie7中，如果在兄弟之間有一個html注釋，臨近兄弟選擇器將無效。普通兄弟選擇器示例hlp c

6、olor:#f00;描述該選擇器定位一個指定元索后而的所有兄弟元素。將此選擇器應(yīng)用到上面的那個例子，將會對兩個p標(biāo)簽都有效。當(dāng)然，如果有一個p元素出現(xiàn)在hi之前，那個p元素不會被匹配。支持情況ie6noie7yesie8yes偽類和偽元素:hover后面的后代選擇器示例a:hover span color:#0f0;描述一個元索可以被:hover偽類后曲的選擇器定位.就像后代選擇器樣。上血的例子，在鼠標(biāo)懸停的時候?qū)淖僡元素內(nèi)的span元素中的文字的顏色。支持情況ie6noie7yesie8yes鏈偽類示例a:first-child:hover color:#0f0;描述偽類町以鏈起來以縮小

7、元索選擇。上面的例子會定位毎一個父級元素下的第一個a標(biāo)簽，并將hover偽類p應(yīng)用到它上。支持情況ie6noie7yesie8yes非錨點(diǎn)元素中的:hover示例div:hover color:#f00;描述:hover偽類可以應(yīng)川到任何元索的懸停狀態(tài)，而不只是a標(biāo)簽。支持情況ie6ie7ie8yes:first-child 偽類示例div li:first-child background:blue;描述改偽類定位毎個指定的元索的父級元索的第一個子元索。支持情況ie6noie7yesie8yesbugsie7中,如果要定位的第一個子元素之前有html注釋,first-child偽類將會無效。

8、:focus偽類示例a:focus border:lpxsolidred;描述該偽類定位有儲盤焦點(diǎn)的所有元索。支持情況ie6noie7noie8yes:before 和:after 偽類示例#box:before content:”本段文字在盒子前面”;#box:after content:”本段文字在盒子后面”;描述這兩個偽元索分別在指定元索的詢面和后而添加生成的內(nèi)容，結(jié)合content屬性一起使用。支持情況ie6noie7noie8yes屬性支持由position產(chǎn)生的實(shí)際大小示例#boxposition:absolute;top:right:loopx;left:0；bottom:200

9、px;background:bl ue;描述定義top? right, bottom,和1 eft值到絕對定位的元索上將給這個元索實(shí)際的犬?。▽挾群透叨龋m然并沒有設(shè)定使寬度和高度值。支持情況ie6noie7yesie8yesmin-height 與 min-width示例#boxmin-height:500px;min-width:300px;描述這兩個風(fēng)性分別指定元索的寬和高的最小值，允許一個盒子可以比指定的最小值更大，但是不能更小。它們兩個可以一尼使用，也可以分開來用。支持情況ie6noie7yesie8yesmaxheight 和 max-width示例#boxmax-height:

10、500px;max-width:300px;描述這兩個屈性分別指定元素的高和寬的最大值，允許一個盒子比這個捋定的最大值小，但是不能更大.它們也可以同時使用或者單獨(dú)使用。支持情況ie6noie7yesie8yes透明邊框顏色示例#boxborder:solidlpxtransparent;描述一個透明的邊框色允許個邊框和邊框色可見（或者不透明）時占用一樣的空間。支持情況ie6noie7yesie8yes固定位置元素示例#boxposition:fixed;描述position屬性的這個值允許一個元索絕對的相對于窗口定位。支持情況ie6noie7yesie8yes固定位置的背杲圖示例#boxbac

11、kground-image:url(images/bg.jpg);background-position:00；background-attachment:fixed;描述background-attachment屈性的值為fixed允許 個背景圖片絕對地相對于窗口定位ie6i e7yesie8yesbugs就像position:fixed 樣，ie6同樣不支持background-positon的fixed值。然而，在ie6中只有在這個值用于根元索的時 候才有效。屬性值“inherit"示例# boxdisplay:inherit;描述將值inherit應(yīng)用到一個屈性那個允許一個元

12、素從它的包含元素繼承計(jì)算的值。支持情況ie6noie7noie8yesbugsie6 和ie7 不支持 inherit 值除了 direction 和 visibility 加性。表格單元的邊框空白示例table td border-spacing:3px;描述該屬性設(shè)置相鄰的表格單元的邊框之間的空白。支持情況ie6noie7noie8yes 在表格中渲染空單元格示例table empty-cells:show;描述該屬性，只應(yīng)用于元素的display屬性被設(shè)迎為table-cell的元索，允許空單元恪渲染他們的邊梅和廿頭 否則，它們將不可見。ie6noie7yesbottom;默認(rèn)是頭部。i

13、e6noie7noie8yes表格標(biāo)題的水平位置示例table caption-side:描述這個屬性允許將一個表格的標(biāo)題放到表格的底部支持情況修剪區(qū)域示例#boxclip :rect(20pxz描述300px,200px,loopx)該屬性指定一個盒子的個區(qū)域可見,剩下的部分修剪掉,或者不可見。支持情況ie6noie7noie8yesbugs有趣的是.該如果不使用隔開各個值的逗兮 ie6和ie7也可以用這個風(fēng)性。（比如，使用空格隔開剪切的值。）打印頁面中的orphanes和w idow s示例p orphans:4；p 4；widows:描述orphans國性設(shè)定在打印頁面底部顯示的最少行數(shù)

14、。而widows城性用來設(shè)定打印頁面頭部至少顯示的段落的行數(shù)。ie6i e7noie8yes盒子內(nèi)的頁面分割示例#boxpage-break-inside:avoid; 描述該屈性設(shè)定分頁是否發(fā)生在一個指定元素內(nèi)。支持情況ie6noie7noie8yesoutline 屬性示例#boxoutline:solid lpxred;描述outline outline-style, outline-width,和outline-color 的縮寫。該屬性要優(yōu)于border風(fēng)性，因?yàn)樗粫绊懳臋n流，因而u更有助于調(diào)試布局問題。支持情況ie6i e7ie8yesdisplay屬性的替代值示例#boxdi

15、splay: inline-block;描述display屬性通常設(shè)置為block, inline,或none。替代值包扌舌: inline-block inline-table list-item run-in table tablecaption table-cel1 table-column table-column-grouptable-footer-grouptable-header-grouptable-rowtable-row-group支持情況ie6noie7noie8處理可折疊空白示例p white-space: pre-line; div white-space: pre-

16、wrap;描述whi te-spaice屈性的pre-iine值設(shè)定將名個空白元索折疊為一個空白，同時允許明確的設(shè)迓斷tbwhi te-space 屬性的pre-wrap值不會將多個空白折疊為一個，不過也允許明確的設(shè)迓斷行。支持情況ie6ie7noie8yes其它各種技術(shù)im port的媒體類型示例import url ( n styles.css n) screen;描述就像上面的例子那樣.引入的樣式表文件的媒體類型聲明在文件地址的后面。在該例子中.媒體類型是screen支持情況ie6noie7noie8yesbugs盡管ie6和ie7支持import，它們在媒體類型被指定的時候會無效灰至?xí)?/p>

17、引起正import規(guī)則無效計(jì)數(shù)遞增示例h2 counter-increment: headers;h2:before content: counter(headers)描述該css技術(shù)允許你自動增加出現(xiàn)在指定元索前面的編號，結(jié)合before偽元索一起使用。支持情況ie6noie7noie8yes生成內(nèi)容的引用字符示例q quotes:tv 1 vv99 v n q:before content:open-quote;q: after content:close-quote;描述指定用f生成內(nèi)容的引用呼號，用于q標(biāo)簽。支持情況ie6noie7noie8yes重要bug和不兼容性問題下面是在上文中

18、沒冇提到的ie6和ie7的眾多bug。當(dāng)然這個列茨不包扌舌在這三個瀏覽器屮都不支持的條目。i e6 bugs不支持用樣式設(shè)®abbr元素不支持以連字符利下劃線開頭的class和id名select元索總是出現(xiàn)在堆疊最上面，而無視z-index值:hover 偽序號就不會增如果錨點(diǎn)的偽類沒有使用正確的順序(:link, : visited, :hover),類將無效一個屬性的！ import"nt聲明會被同一規(guī)則中同一屬性的沒有使用!important的第二個聲明覆蓋。 height 表現(xiàn)類似于min一height width表現(xiàn)類似于min-width左右margir雙倍圓點(diǎn)邊框(dotted)看起來像虛線邊框(dashed)text一decoration的line-through值在文字上看起來比別的瀏覽誥要髙一些有序列表如果有一個固定結(jié)構(gòu)(haslayout為true,不能設(shè)遼li的高度/寬度/zoom等激活haslayout的值),加，而是保持為1列表元素不支持1 iststyle一type的所有可用的值如果