IE CSS Bug系列：通配選擇符Bug

Ivy_Ling發表於2013-10-16

伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@ivy3372 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）

【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。

—————————————————————————–

受影響版本

該bug影響：IE6

表現

IE6裡 *html 選擇器未被忽略（由於當通配選擇符是選擇器裡的第一部分時，它被忽略了。）

教程日期

2009-8-10 04:42:20 星期一

描述

這個bug更像是將特定的規則集運用到IE6的工具，而不是趁你睡著時咬你的什麼東西。我們來看demo：

示例

由於這個bug的性質，示例在一個單獨頁面上separate page

CSS Code:

div {
    width: 200px;
    padding: 50px;
    margin: 0 auto;
    background: #ddd;
}

* html div {
    background: #00f;
}

div {

width: 200px;

padding: 50px;

margin: 0 auto;

background: #ddd;

}

* html div {

background: #00f;

}

HTML Code:

<div></div>

1	<div></div>

由於<html>元素被功能正常的瀏覽器認為是根元素，用通配選擇符（*）在它之上沒有什麼可選擇的。因為這個原因*html被功能正常的瀏覽器忽略，但是IE6裡發生的情況是：當通配選擇符是選擇器的第一部分時，它就被忽略了，所以，對於IE6它就直接成了html。

我們的*html div 選擇器被功能正常的瀏覽器忽略，而在IE6裡它成了html div，比起之前的div選擇器更為具體，這有效的導致了我們的<div>特定地在IE6裡被加上了藍色。

解決方案

以下是按照解決方案型別排序的解決方案：

解決方案（清理方案）

解決時間

2009-8-10 04:48:14 星期一

修復版本

所有受影響版本

描述

正如我早前提到的，相比常見的bug帶來的鬱悶，這個bug更像是用於判定IE6；我懷疑你是否會需要“修復”它。讓我們看看修復程式碼：

由於這個bug的性質，修復的程式碼在單獨的頁面可獲得separate page