pseudo-class, pseudo-element, pseudo-CSS

伪元素和伪类

这篇文章打算总结伪类和伪元素的 bugs 以及在 IE6/Win 和 IE7 beta3 中表现的不一致性。

The :first-letter pseudo-element

语法

IE6: 在选择器 selector 和 声明块 declaration block 之间必须得有一个空格 blank(IE
6 pseudo elements bug) -
这与在标准模式下正常解析的行为是不一致的。(fixed id IE7b2) 。

IE6,IE7b2 : 还有另外一个问题："逗号前面没有空白"的问题，请看



Specificity

IE6 : 伪元素会匹配其他的 #id rules ，这种奇怪的行为违背了规范。在下面的例子中，就算在页面上没有 id=nonexistent ，#content 所有的 block-level links 在 hover 时也会出现绿色的 first-letter 。(fixed in IE7b2)

[ testcase ]



如果是 inline-level ，当hover时就不会变成绿色。

在IE6，7b3 : 这里还有一个奇怪的行为 : IE把 first letter 渲染为 2em ，但是 link 是蓝色的斜体。

[ testcase ]



伪元素的表现篡改着规范 - 调试者的惨状。通常，不推荐使用 !important 这个 workaround 来修复 IE6，因为 !important 本身在 IE6下就存在bug 。

继承 Inheritance

IE6,7b3 : 如果伪元素未设置尺寸 undimensioned (non-layout) ，那么它通过 em 来设置 margin 的话 (em-margin) ，会继承它自己的 em font-size 。下面的例子，first-letter 显示 3em margin-left 。 (也就是说 p 如果不具有 layout ，那么如果用 em 来设置 margin ，字体也用em，那么 margin 实际上是 font-size 的大小。)

[ testcase ]



一个解决办法 (workaround) 是让 p 元素获得 "layout" 。

应用的不稳定性：另外一个元素毗连伪元素 Application instability: another element adjacent to the pseudo-element

IE6,7b3: 更糟糕的是，当你让一个伪元素成为另外一个元素的一部分，或马上在伪元素后面跟另外一个元素，这可能烧毁你的 Win XP SP2 PC/Virtual PC 。看看这个例子，当排版时，强调首个字的句子。

[ testcase ]





first-letter错误的继承了 left margin 。span也继承了，导致一个 (font-size:) 2 X (margin-left:) 3em 的空白 (gap) 。另外，从span开始3em的地方，有一个区域继承了margin，padding，border和background-image!

的现在，当 .ipsm 通过获得layout的子集中 (position:absolute;/float:any value;/display:inline-block;/zoom:1;)获得了 "layout" ，将会发生什么呢？是的。有些要停止进程，有些要重启，数据会丢失。别这样做。



的解决方法是使用下面规则 rules 中的一个，也许是因为这回又一次改变特征所以 span 不会试着去继承。



The bug is already tracked by Quirksmode's
Bug Report and was filed to MS once more in Feb. 2006.

有序和无序列表

IE6,7b3 : 在有序列表中，li:first-letter 作用在列表项和序号上。有序列表也是一样的。

[ testcase ]



浮动

IE6,IE7 : 看起来 first-letter 伪元素只支持 float : left 。它不能被 float: right 重写，也不能被 float:none; 重置。



[ testcase ]

The :link and :visited pseudo-classes

A human bug

人们语言的理解有时会导致一些错误，但是这跟浏览器无关。

:link 伪类 (pseudo-class) 作用在那些还没有被访问过 (visited) 的元素上。一旦link 被用户访问过，:visited 伪类就会生效。这两个状态相互排斥。

:visited but not visited

IE6: 当我们在设计页面的时候使用 "#" 的时候 <a href="#">link</a> ， 一旦页面加载完成，IE 声明这些链接为 visited (fixed in IE7b3)。这可能导致当一些引用被包含进来时出现一些惊人的差异。

[ testcase ]



The :active adn :focus pseudo-classes

IE6 ,7b3 : :active 被实现了。

IE6,7b3 : :focus 没有被实现。

因为 :focus 没有被实现，一个解决方法是使用 :active 伪类。

a:focus, a:active {property: value;}

当用户通过返回按钮返回时，链接仍然保持 :active

只有IE6,7b3这样，其它浏览器都不兼容。

[ testcase ]

The :hover pseudo-class

:hover is limited to links in IE6

IE6: Well tested workarounds to achieve whatever:hover are csshover.htc and IE7
{ css2: auto; }.

IE7b3: Implemented, see [ testcase ].
后代选择器： 子元素不能获得 :hover 传递

的IE6: 一个经常被问到的问题就是，为什么下面的代码在 IE6 下不起作用，其他浏览器都可以用。

[ testcase ]

a:hover
img {border: 1px solid fuchsia;}

还有为什么这样一个 bugfix 就会起作用？(And why can a bugfix like the following ever work?)

a:hover img {border: 1px solid fuchsia;}

a:hover {background-position: 0 0;}

One hypothesis (假设) looks at the signal chain of redraw events:

a_hover(redraw=true)

calls

img(redraw=true)

这个假设是说，IE没有把 hover 的传递(transition) 看作是一个整体除非存在 a redraw event triggered (一个重画事件被触发) - 外部通过重画 the window ，内部通过重新设置 a:hover 的 background 位置或由于其它作用在 a:hover 上的属性的子集。这些属性将标志着在 on hover 过程中有些东西会发生变化。

一个没有任何逻辑的处理是 background-position:0 0; ，就算根本就没有 background-image 它标志着 a change on hover 。

Stuck on hover

IE6:有时 background-images 在 on hover 时，当鼠标移开后，好像被卡住了，不消失。根据background-iamge的大小与元素大小的关系和其它因素(不透明)，当链接觉有 "layout" 时，hover-state 可能 "click in" 。当鼠标指针离开 the hoverable area，背景被错误的 redrawn 。当 scrolling 或者 page reload 后，这种效果会消失。

一个修复的办法是 "un-layout" the link ，但这大多数情况下不可能，由于 layout 进退两难: 或者是因为宽度是必须的，或者是浮动，或者其它原因。当layout元素 "自己负责drawing 它们的内容"，猜猜当 :hover-transition 被处理后谁来负责。

一个更好的修复方法，类似于上面的 "descendant selectors"-fix ：我们可以强制它 redraw， a rearrange on hover。

作为一种选择，如果 background-position 可以使用，我们也可以显式的设置 background-repeat 或 background-color 。不管怎样，IE6-flicker 问题依然存在，这个问题和不同的bug相关。

Sticky hover state on click

IE7 : 一个 stuck-on-hover 的变种，当 mouseclick 后 hover state 没有变回来。Click on a drop down menu entry in a Son of Suckerfish drop down menu 。

同样，修复办法是改变 hover 本身。

#nav li:hover {background-position: 0 0;}

IE6没有这个bug是因为 javascript 已经处理了 li 的鼠标事件。

Part of a floated element disappears on :hover

IE6: 这最有可能是 Guillotine
Bug 相关 (fixed in IE7b2)。

Jump on :hover as a consequence of the re-flow

IE6 : 一个CSS的基本概念就是，页面是增量渲染的incrementally
rendered，所以用户不用等到所有元素都加载完成。在IE中一个非常特别的情况是允许容器自动扩展宽度和高度 ("expand-to-fit") ，甚至已经设置了尺寸来强制元素的范围时也是如此。现在，概略的，假设是错误的。On :hover ，IE re-renders the elements of a "layout" block ，元素 re-flow ，但是这时，IE所有的尺寸 (他们在第一次就确定下来了)都知道了。这就导致了 a jump on hover ，特别是在用百分比设置 margins
和 paddings 时 percentage
margins and paddings(例如，Holy
Grail layout jump)在其他 bug-related situations 也会看到。The jump 经常会修正初始化时的错误的摆放，我们必须在 hover 事件发生之前找出错误摆放的地方。

IE7 : 跟IE6一样，凭经验就是 相对定位的容器需要设置 hasLayout ，否则奇怪的事情，像消失或 子元素jumping 可能发生。 A :hover 事件可能是触发器。在这种情况下检查父元素的 haslayout-state 。

跟这个无关的是，有时 "trivial" 引起 a jump on hover 是在仅在 hover-state 时声明 border ，这种情况的修复办法是给 link 一个跟背景色一样的边框。

The chaining of pseudo-classes

IE6: 这个有效的串联在 IE6/Win 中不起作用。在这个例子中，所有的 hovered links become red (fixed in IE7b2) 。

[ testcase ]