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

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

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

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

4、lass2class3"><p>content here</p></div>支持情況ie6noie7yesie8yesbugsie6好像支持這種情況，因為它能匹配鏈中的最后一個class到使用該class的元素上，然而.它并不能限制一個使用鏈中所有class的元索。屬性選擇器示例a hrefcolor:#ofo;描述該選擇器允許一個元索彼定位只耍它有扌旨定的加性。在上面的例子中.所有的帶有href m性的a標簽都會被限定，而沒有href屈性的a標簽不會被限定。支持情況ie6noie7yesie8yes臨近兄弟選擇器示例hl+p color:#

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

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

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

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

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

10、500px;max-width:300px;描述這兩個屈性分別指定元素的高和寬的最大值，允許一個盒子比這個捋定的最大值小，但是不能更大.它們也可以同時使用或者單獨使用。支持情況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應用到一個屈性那個允許一個元

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

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

14、。而widows城性用來設定打印頁面頭部至少顯示的段落的行數。ie6i e7noie8yes盒子內的頁面分割示例#boxpage-break-inside:avoid; 描述該屈性設定分頁是否發(fā)生在一個指定元素內。支持情況ie6noie7noie8yesoutline 屬性示例#boxoutline:solid lpxred;描述outline outline-style, outline-width,和outline-color 的縮寫。該屬性要優(yōu)于border風性，因為它不會影響文檔流，因而u更有助于調試布局問題。支持情況ie6i e7ie8yesdisplay屬性的替代值示例#boxdi

15、splay: inline-block;描述display屬性通常設置為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值設定將名個空白元索折疊為一個空白，同時允許明確的設迓斷tbwhi te-space 屬性的pre-wrap值不會將多個空白折疊為一個，不過也允許明確的設迓斷行。支持情況ie6ie7noie8yes其它各種技術im port的媒體類型示例import url ( n styles.css n) screen;描述就像上面的例子那樣.引入的樣式表文件的媒體類型聲明在文件地址的后面。在該例子中.媒體類型是screen支持情況ie6noie7noie8yesbugs盡管ie6和ie7支持import，它們在媒體類型被指定的時候會無效灰至會

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

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