自己搜集常见浏览器bug

1,IE6下,由于浮动导致双倍边距问题。主要产生于横向排列的商品列表中。解决方案,将产生双倍编剧的元素定义属性 _display:inline;

2,内联样式元素后有空格时,右侧及下侧各产生3px边距问题。主要发生于图文混排的情况。解决方案,内联元素后如不希望出现3px边距,则在后面不出现空格和tab/回车等符号,直接接下一个元素标签。如出现回车,则将产生IE下3px边距仍存在,而其他浏览器下3px已被清除的现象。如不能连续书写标签,则可在css中设置内联元素为display:block,再根据需求设置float属性以保证模拟内联效果。

3,<li>标签中包含有块级元素,也有可能只限于a标签display="block"形式。在IE6下,li之间会出现未定义的上下边距。这个边距并不是期望的结果。去掉边距的方法:
1)将<li>的display设置为inline-block。
2)给内部的块级元素(a标签)设置宽度为100%或者一个定值。
IE6下即可解决此问题。
方法1的问题是,内部block形式的内容,能保留其边距和高度值,但宽度无法保证。
方法2的问题是:在某些情况下,无法精确设定这个“宽度定值”。
须根据实际情况选择这两种方法。

4,DL, DT, DD系列标签,如果DT,DD中包含a标签。在Safari下出现的line-height无法撑开高度问题。解决方案:为a标签设置display:inline-block。

 

你可能感兴趣的:(css,浏览器,IE,Safari)