跳出CSS浏览器兼容性那些坑

时间:2020-11-28 19:46:54

话说现在html5是老大,很多低版本的浏览器已经不需要过多的去测试兼容性问题,但是作为前端的大神小神们,我们还是需要去了解一下低版本浏览器兼容性的解决方法,有备无患,以下是自己的一些总结整理,还望大家多多补充知道(PS:大家都是多多):

1、margin加倍问题(IE6中)

原因:同时设置:float:left;margin-left:10px/float:right;margin-right:10px/float:left;margin:10px;

解决办法:给浮动的元素加display:inline;

注:内联元素不加倍,因为其默认为display:inline;

2、内层容器有浮动,外层容器不能自动扩高

原因1:内层浮动

解决:overflow:hidden/auto;zoom:1;(兼容IE6)

原因2:<style type="text/css">

body{ margin:0; padding:0;}

#v1{background-color:red; overflow:hidden; zoom:1;}

#v2{background-color:green; margin:10px;}

</style>

</head>

<body>

<div id="v1">外层

<div id="v2">adsf</div>内层

</div>

</body>

</html>

3、让超链接以整块显示

解决:加display:block;width:100px;height:50px;

4、IE6中的3px问题

原因:在两个并列的元素中,上边一个加浮动,下边不加浮动,在IE6中是左右关系并且中间有3px ;在IE7中是左右关系中间没有3px 的空隙;在IE8、火狐中是上面覆盖下面的,只能看到上面的。

解决:

a、3px问题:给两个元素都加float;

b、重叠覆盖问题:给V2清除浮动(clear:both;)

c、左侧固定右侧自适应时存在的3px

#v1{width:100px;height:100px;background-color:red;float:left;_margin-right:-3px;}

#v2{background-color:green;height:100px;}

<div id="v1">v1</div>

<div id="v2">v2</div>

*margin-right:-3px(IE6识别,IE7不识别)

5、IE6中不能定义高度小于18px的容器

解决: overflow:hidden;

6、ol 、ul在IE6、IE7中是margin-left:40px;在IE8、火狐中是padding-left:40px;也有margin上下值。

解决:给ol,ul{margin:0;padding:0}重置

7、加margin:0;padding:0时,列表图标不显示

解决:list-style-position:insde;

如果li标签设置了浮动ie当中小图标不显示,解决方法给li加背景图片

8、img或embed 下方有空隙(ie6)

解决:给img设置display:block;

9、两个并列的元素,上边加浮动,下边清除浮动,并加浮动,在IE6、IE7中clear不起作用。

<style type="text/css">

#v1{background-color:red;float:left;width:100px;height:100px}

#v2{background-color:green;clear:both;float:right;width:100px; height:100px;}

</style>

</head>

<body>

<div id="v1">v1</div>

<div id="v2">v2</div>

</body>

</html>

结果两个盒子,在一个线上左右关系。

解决:

<style type="text/css">

#v1{background-color:red;float:left;width:100px;height:100px}

#v2{background-color:green;float:right;width:100px;height:100px;}

.clear{ clear:both;}

</style>

</head>

<body>

<div id="v1">v1</div>

<div class="clear"></div>

<div id="v2">v2</div>

</body>

</html>

10、IE6中锚伪类,a:link不出现问题,清空缓存

11、span:hover ,<=ie6不支持

12、图片加超链接时,IE6中有border

解决:给img加border:0或者border:none;

思考:两者区别?

13、多余字符用....代替,火狐不支持 text-overflow:ellipsis

14、visibility:hidden(隐藏但是占据空间)与display:none(隐藏,不占空间);

还会继续补充添加,有兴趣的话可以加我Q群142991222一起讨论交流学习。