web.Frontend :: 翻译：On having layout :: April :: 2006

web.Frontend :: 翻译：On having layout :: April :: 2006

对已渲染元素的重排(re-flow)

当所有元素都已渲染完成时，如果有一个因鼠标经过而引起的变化产生(比如某个链接的 background 有变化)，IE会对其 layout 包含区块进行重排。有时一些元素就会因此被排到了新的位置，因为当这个鼠标经过发生时，IE已经知道了所有相关元素的宽度、偏移量等数据了。这在文档首次载入时则不会发生，那时由于自动扩张的特性，宽度还无法确定。这种情况会导致在鼠标经过时页面出现跳变。

* Jump on :hover
* quirky percentages: the reflow

这些和重排问题相关的 bug 会给百分比边距和补白使用较多的流动布局带来不少麻烦。

pseudo-class, pseudo-element, pseudo-CSS: IE/Win bugs with :first-letter, :hover & Co.

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

IE6: It's a basic concept of CSS that a page is incrementally rendered, so the user doesn't have to wait until all elements are loaded. The very special situation in IE by allowing containers to expand in width and height ("expand-to-fit"), even when a dimension is given, forces IE to make assumptions on the real boundary of an element. Now, roughly, assumptions can be wrong. On :hover, IE re-renders the elements of a "layout" block, the elements re-flow, but at this moment, all the dimensions are known to IE (they were determined in the first round). This results in a jump on hover, especially on percentage margins and paddings (e.g. in the Holy Grail layout jump), but can be seen in other bug-related situations too. The jump usually corrects the initial misplacement, the jump often indicates that we have to search for a wrong placement of the element before the hover event is performed.

IE7: Like in IE6, it's a rule of thumb that a relatively positioned container needs haslayout, otherwise strange things like disappearance or jumping of the descendants might occur. A :hover event might be the trigger. Check for the haslayout-state of parent elements in these cases.

Unrelated to this, sometimes the 'trivial' cause of a jump on hover is the declaration of a border at the hover-state only, and a fix is to apply a invisible background-colored similar border on the link.