常见的浏览器兼容

Posted 2020-08-19 微笑

1.不同浏览器默认的margin、padding不同

　　　　重置样式

2.ie6下双倍bug：

　　1. 浮动

　　 2. 块属性元素

　　 3. 有margin横向的值

　　 4. ie6下

　　　　 display:inline;

3.图片与图片之间及图片底部有间隙

　　 浮动 或 display:block; 或 vertical-align:top | bottom |middle

4.ie6 7下默认有行高

　　设置overflow:hidden;

　　或者设置line-height小于你设置的高度

5.a标签里嵌套img时，有些浏览器下会出现有颜色的边框

　　border:none; 或者 border:0;

　　 （渲染、不渲染）

6.透明度的兼容问题

　　opacity:0.5; filter:alpha(opacity=50);

7.IE6-8中的a标签默认带虚线框

　　 例：<a href="#" onfocus="this.blur();">

　　 例：<a><span>测试</span></a>

8。居中问题

　　如div设置 margin: 0 auto; 时已经居中，IE(ie低版本) 不行，

　　　　IE需要设定body居中，首先在父级元素定义text-algin: center;意思是在父级元素内的内容居中 ……..

bug产生总结：

　　1. bug经常出现在低版本ie中

　　2. 很多兼容问题是由于标签的不合理嵌 套，标签的使用不规范而产生

　　3. css样式使用不当也能造成兼容问题