IE CSS Bug系列:IE6 :first-letter中样式被忽略

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

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

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

受此bug影响的浏览器版本

IE6

表现

整个:first-letter规则集被忽略

教程日期

2009.07.28 09:36:43 星期二

描述

这是一个比较少见的bug,产生的原因挺有意思的,我们从一个演示来看看这个问题:

演示

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

HTML Code

CSS Code

在功能完善的那些浏览器上一切正常,但是IE6貌似完全忽略了:first-letter伪元素,似乎它不支持该元素似的。

眼尖的同学也许注意到了我的选择器中的h2,并且会怀疑我是否在写这段代码前耍了什么花招。好吧,不是你们想的那样,其实只要在:first-letter的后面加入h2或其它任何选择符并用逗号分开,都会导致IE6忽略:first-letter。你能马上想到解决方案吗?:)

 

解决方案

以下是针对bug的解决方案

方案(清洁方案)

解决日期

2009.07.28 09:41:51 星期二

修复版本

所有受影响的版本

描述

这不是第一次我宣称解决方案超级简单了,不过我觉得这个bug确实容易解决。让我们来看看修正后的演示并尝试发现其中的变化:

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

HTML Code

CSS Code:

现在一切正常美观了。为了修复这个问题我到底做了什么呢?我只是将:first-letter这个伪元素选择器移到了最后面(即这个选择器后面没有逗号和其他的选择器)。是的,实际上就是这么简单。

收藏 1 评论

关于作者:rubyisapm

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

相关文章

可能感兴趣的话题



直接登录
最新评论
  • hutuxu   2013/10/22

    还要保证伪元素选择器与声明块的左花括号之间至少有一个空白(如空格、换行),不然IE6会依然忽略:first-letter

跳到底部
返回顶部