是否!重要的是在IE6中不起作用?

Jit*_*yas 3 css cross-browser internet-explorer-6

!important在IE6中不起作用?如果我们也需要IE6兼容性那么我们不应该使用!important?

Mat*_*ell 6

当!important的规则是选择器中该属性的最后一条规则时,IE6支持!important.

这听起来有点令人困惑,但如果你声明一个!important高度,它必须是给定选择器中'height'的最后一个声明.

因此,请考虑以下示例:

#selector { height: 100px; height: 150px !important; }
Result: All browsers: 150px;

#selector { height: 100px; height: 150px !important; }
td#selector { height: 200px; }
Result: All browsers: 150px;

#selector { height: 100px; height: 150px; }
td#selector { height: 70px; height: 200px !important; }
Result: All browsers: 200px;

#selector { height: 100px !important; height: 150px; }
Result: All modern browsers but ie6: 100px; ie6: 150px;

#selector { height: 100px !important; height: 150px; }
td#selector { height: 200px; }
Result: All modern browsers but ie6: 100px; ie6: 200px;

#selector { height: 100px; height: 150px; }
td#selector { height: 70px !important; height: 200px; }
Result: All modern browsers but ie6: 70px; ie6: 200px;
Run Code Online (Sandbox Code Playgroud)

ie6做的是将每个选择器的'height'值解析为选择器中存在的最后一个'height'声明(其他规则可能适用,但我相信这是你的标准情况).然后它根据!important和选择器特异性规则从所有这些中选择最具体的"高度".它有效地忽略了不是选择器中最后一个的"高度"声明.

在比较基于!important和特异性规则的选择器之前,其他浏览器在解析每个选择器的'height'值时会考虑'!important'.

这样做的一个"好处是,每个其他合理的浏览器都将使用您的"重要"样式,而ie6将选择该选择器中的最后一个规则声明.

你可以用ie6特定的样式表更好,但除非只有极少数的ie6调整,你想css评论每一个作为ie6漏洞利用.

心理榜样

想象一下,选择CSS规则是1)获得与元素匹配的所有规则,2)决定使用哪些规则.假设内联样式标记只是另一个选择器,除非我另有提及.

在其他所有浏览器中,如果要获取元素的"高度",它会大致这样做:

  1. 对于每个选择器,选择最后一个!重要高度(如果有),否则只选择最后一个高度.

  2. 选择最具体的选择器,其中所选的"高度"是!重要高度,否则是内联样式高度,否则是最具体的选择器.

在ie6中,它大致如下:

  1. 对于每个选择器,选择最后一个高度

  2. 选择最具体的选择器,其中所选的"高度"是!重要高度,否则是内联样式高度,否则是最具体的选择器.