兼容性、解决方法(持续更新)、hack技术
* 常见的bug
1.IE6中,浮动的块如果有横向margin,则最靠边的那一块的靠边的边会出现双倍bug,解决方法,display:inline。
2.IE6中,默认行高不是0,所以需要用 _height来强制设置。
3.IE6和7中,li设置了宽高以及里面包含浮动的子元素,则会出现行间距。不设宽高或不浮动来解决。
4.在IE6,如果一个不浮动的父元素包含了浮动的子元素,且父元素定宽,则浮动的子元素依然会撑开行高,而在别的浏览器,则不会撑开。IE6的行高总是能被撑开!!
5.在IE6中,文字内容后面如果出现浮动的a,a会换行,所以需要将前面的文字放在span中也做浮动。虽然这是正常的,因为a浮动后会变成块元素,但是在其他浏览器中,却不会换行。
6.在使用ul,ol,dl,li的时候,IE6的解析方式与其他浏览器会有区别,所以应当在初始化时清空他们的样式,然后自己来定制他们。尽量不要使用list-style-image,因为他总是不垂直居中。
7.IE6会在margin的部分,将垂直相邻的margin算成更靠上的那个框的内容,并且会填充背景;
* 小心得
内容和行内标签、包括inline-block的位置,会被浮动的标签所影响,因为这是属于不堆叠的排版机制。
* hack
不得不说有些bug用这个调起来更加方便快捷,但有时会做一些强制改动,略微会影响到同一的外观。
ie6 _height:100px;
ie6/7 *height:100px;
ie7 *+height:100px;
除了ie6 height:100px !important;
ie8 height:100px \9;
总是把更小范围的hack写在后面,否则会被覆盖
最小高度的设置:_height:100px; min-height:100px;