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?)

  1. a:hover img {border: 1px solid fuchsia;}
  2. a:hover {background-position: 0 0;}

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

  1. a_hover(redraw=true)
  2. calls
  3. 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 ]


  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值