兼容性、解决方法(持续更新)、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;

posted @ 2012-06-24 13:24  丛子  阅读(237)  评论(0编辑  收藏  举报