返回首页当前位置：首页 >> 网站建设 >> 正文

position relative在IE下处理长文本的问题

文章来自:设计学院 | 发表时间:2007-9-28 22:37:04

问题演示

新建一个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。看来写下自己发现问题解决问题的过程，也是能学到东西的。希望对大家也有帮助。
想起来 old9 已经翻译了 On having layout 一文，这里是中文翻译。
相关文章 更多