豆豆猫的窝

IE，I真服了U

2007年12月25日

2007.12.25 21:48:23

这两天一直在努力地完成我的书稿，但是今天进度再次被IE拖了后腿。

写到相对定位的时候，一个很简单的例子：

<div id="position1">
  <p class="sample1">段落1中的文字</p>
  <p>段落2中的文字</p>
</div>

然后对“sample1”设定了定位：

.sample1 {
background:#ff9;
border:2px solid #fc3;
position:relative;
top: 15px;
left: 15px;
}

结果在IE里面，“sample1”的上边框消失。搜索一下，却没有发现关于这方面的解释。思路一下子就断了，于是只好发呆。这已经不知道是第几次IE捣乱了，我已经没有了最开始的恼怒，只剩下无奈。

吃饭的时候，无意间聊到了“垄断”，某人说，虽然微软是垄断，但是那是不可避免的。不由得又想到了IE，更加无奈。

回来继续想这个边框的问题，于是想到了那篇有名的文章――《On having layout》，这篇文章详细介绍了IE的内部渲染的原理，以及产生各种Bug的原因和解决方法。

于是又看了看，果然找到了答案：由于 position: relative 并不触发 hasLayout，所以很多诸如内容消失或错位的渲染错误就会因此而起。

于是给“sample1”增加一条定义：

height: 100%;

于是，一切正常了……

参观一下示例吧。