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

来源：互联网发布：通联数据校园招聘编辑：程序博客网时间：2024/05/21 11:23

话说现在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;}

*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不起作用。

#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>

</body>

</html>

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

解决：

#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>

</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一起讨论交流学习。

0 0