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注释,例如: