position relative在IE下处理长文本的问题
写于 2006年04月13日 20:07 评论(3)
问题演示
新建一个HTML文档，为了方便起见，省略掉<html>、<head>、<body> 等标签。输入以下代码：
<div style="position: relative">大段的汉字，什么算大段？大约超过正常 IE 浏览器一屏半左右，无样式正常大小字号大约是2500汉字。
</div>
我这边有两个对比页面：问题页面和正常页面可以供参考。两者的差别非常大。
尽我所能得测试了一下：
- Firefox 1.5 正常，Gecko内核浏览器应该没有此问题；
static、fixed和absolute没有此问题；- 除
<html>和<body>外，其他内联或块级元素都有此问题； - 英文没有此问题；
原因分析
在测试的时候已经发现如果在 style 里面加上 width 或 height 就可以避免这个问题。忽然想起 On having layout 一文，于是查阅了一下，应该是 IE 的 haslayout 属性搞的鬼：
Note that position: relative does not trigger hasLayout, which leads to some rendering errors, mostly disappearing or misplaced content. Inconsistencies might be encountered by page reload, window sizing and scrolling, selecting. With this property, IE offsets the element, but seems to forget to send a “redraw” to its layout child elements (as a layout element would have sent correctly in the signal chain of redraw events).
应用文中提到的 hack 就可以避免此问题了。
后话
其实在写本篇刚开始的时候还没有意识到是 haslayout 的问题，在测试的时候加了 width，忽然发现问题没有了。然后才想起来应该是 haslayout。看来写下自己发现问题解决问题的过程，也是能学到东西的。希望对大家也有帮助。
J.
原文地址：http://www.junchenwu.com/2006/04/position_relative_ie.html
评论(3)
写得好 学习了 支持下!
说这么多废话，直接截个图来看效果不就行了。
12222222222：
你看一下文中的问题页面和正常页面就可以知道，光靠截图是没用的。