IE CSS Bug系列::first-line中带有!important的规则被忽略

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。这篇由伯乐在线前端开发小组的@rubyisapm 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

【提示】:IE CSS BUG 系列译文正在进行中,后续或有改动和调整,请不要转载本系列的译文。

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

影响版本

受此bug影响的浏览器版本:IE8

表现

如果使用了!important后缀,:first-line伪类内部的规则会被完全忽略

教程日期

2009.7.30 17:35:14 星期四

描述

这是一个类似于 :first-letter !important Rule Ignore Bug 的bug;本来应该在同一个教程里记录下来的,但我当时并没有立刻发现它,基于某些原因我把这个bug发布成了一个单独的教程…所以就这样吧。

假设你在使用:first-line伪元素,并且(出于一些奇怪的原因)又为强化规则的明确性而增加了!important后缀。其他的浏览器都运行得很好,唯有IE8决定反叛并完全忽略了此规则——不仅仅是忽略!important,而是整个规则。随后你开始加入第二个和第三个!important希望可以修正这个问题,唉,可这条路是走不通的:) 来看演示吧:

 

演示

因为此bug的特性,演示放在一个单独的页面上查看

HTML Code:

CSS Code:

 

在IE8中,段落的第一行实际上是斜体带下划线的,这说明它并没有完全忽略:first-line规则集。但是,其他三个有!important后缀的规则被忽略了。正如我前面所说,你那些带!important的规则是否覆盖了更不明确的规则是无关紧要的。

 

解决方案

方案(清洁方案)

解决日期

2009.07.30 17:40:04 星期四

修复版本

所有受影响的版本

描述

我唯一知道的解决方案就是删除引起该bug的罪魁祸首。看看下面修复后的例子:

因为此bug的特性,演示放在一个 单独的页面

HTML Code

CSS Code

这里没有修改任何内容,除了我删除了规则上的!important后缀 ~ 现在所有元素都出现在IE8上了。既然p:first-line{} 的明确性比p{}高,我们不需要任何多余的把戏去让:first-line伪元素内部的规则生效。如果你的情况更特殊,应尽量通过其他手段让:first-line{}规则集更具体一点。

收藏 评论

关于作者:rubyisapm

前端程序媛…(新浪微博:@rubyisapm) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部