1. 使用 DOCTYPE
你需要在HTML页面的最顶部加上DOCTYPE类型,当然, strict版是值得推荐的,例如:
"">
或者, XHTML页面的!DOCTYPE:
"">2. 设置position: relative
设置position:relative解决了不止一个问题,特别当需要设置对齐的时候。很明显,你需要明白的一点是,绝对定位是相对来说的。说不定,因为你没有设置,而不知道东西都飞到那去了。比如,你设计了每篇文章前都有一张图片,最后,你发现,只有一张图片在页面上,或许,是他们重叠了。
3. 给浮动元素设置 display:inline 值
这源于著名的IE6双倍外边距BUG,例如,你给一个DIV设计了浮动,并且,设置了margin-left:5px;,在IE6中很可能就是margin-left:10px了,这里,给浮动元素设置display:inline;,即可解决问题。
4. 为元素设置 hasLayout
很多IE6(或IE7)的问题可以用设置hasLayout值的方法来解决。(如果你不知道hasLayout是什么,请看)
最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然,zoom也可以用,但这不是CSS的一部分)。设置一个具体的值是推荐的,但有时候并不一定知道高度多少,这里,你可能会用到height:1%。如果父元素没有设置高度,那么元素的物理高度并不会改变,但是,已经具备hasLayout属性。
5. 解决字符重复出现的问题
复杂的布局可能导致一些浮动元素里面的文字,出现在清理浮动位置的下面。这是一个奇怪的问题,下面这此可以帮你解决:
确保浮动元素设置了 display:inline;在浮动元素中使用 margin-right:-3px;在浮动元素的最后一个元素后加上一个IE注释,例如: