1200字范文 > WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【02】

WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【02】

时间：2019-03-17 14:34:10

#兼容问题目录

8、IE6不支持固定定位

9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙

10、IE6下双边距问题

11、IE67下父级有边框，子级有margin的话会不起作用

12、IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效（IE7不管相差多少，直接失效）

13、IE6下元素中除了文字之外，还有inline-block类型元素，元素的行高会失效

14、IE6下文字溢出的问题

15、IE67li间隙问题

后续兼容性问题处理链接地址

/baidu_37107022/article/details/71972223

/baidu_37107022/article/details/71977053

#8、IE6不支持固定定位

可以用js来解决

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>body{height: 3000px;}div{width: 100px;height: 100px;background: red;/*position: fixed;right: 0;bottom: 0;*/position: absolute;right: 0;top: 0;}</style><script>window.function(){var div1=document.getElementById("div1");window.onscroll=function(){var top=document.documentElement.scrollTop||document.body.scrollTop;var bottomPos=document.documentElement.clientHeight-div1.offsetHeight;div1.style.top=top+bottomPos+'px';}};</script></head><body><div id="div1">kaivon</div></body></html>

#9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙

解决办法

给后面元素也添加浮动

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 100px;background: red;float: left;}span{background: red;float: left;}</style></head><body><div>kaivon1</div><span>kaivon2</span></body></html>

#10、IE6下双边距问题

解决方法

给元素添加display:inline;

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;}span,div{width: 100px;height: 200px;background: red;/*margin-left: 50px;float: left;*/margin-right: 50px;float: right;display: inline;}</style></head><body><div></div></body></html>

#11、IE67下父级有边框，子级有margin的话会不起作用

解决办法

触发父级的layout

Layout布局出发方式链接：/baidu_37107022/article/details/71640304

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.parent{border: 1px solid #f00;zoom: 1;}.parent div{width: 100px;height: 100px;margin: 100px;background: green;}</style></head><body><div class="parent"><div></div></div></body></html>

#12、IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效（IE7不管相差多少，直接失效）

解决方法

用padding解决

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.box{width: 500px;width: 480px;width: 483px;margin: 50px auto;border: 10px solid #000;overflow: hidden;padding-bottom: 10px;}.box div{width: 100px;height: 100px;background: greenyellow;float: left;margin: 10px;margin: 10px 10px 0 10px;display: inline;}</style></head><body><div class="box"><div class="div">1</div><div class="div">2</div><div class="div">3</div><div class="div">4</div><div class="div">1</div><div class="div">2</div><div class="div">3</div><div class="div">4</div><div class="div">1</div><div class="div">2</div><div class="div">3</div><div class="div">4</div></div></body></html>

#13、IE6下元素中除了文字之外，还有inline-block类型元素，元素的行高会失效

解决办法：

分别包起来，分别设置行高

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{height: 300px;line-height: 300px;border: 1px solid #f00;}/*span{height: 100px;background: red;display: inline-block;line-height: 100px;}*/.span1{line-height: 100px;display: inline-block;background: red;}.span2{line-height: 200px;display: inline-block;background: green;}</style></head><body><div><span class="span1">inlin-block</span><span class="span2">这是一段文字</span></div></body></html>

#14、IE6下文字溢出的问题

解决办法

1、把注释或者行内元素用div包起来

3、把父级的宽度加3px

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.wrap{width: 400px;/*width: 403px;*/}.left{float: left;}.right{float: right;width: 400px;}</style></head><body><div class="wrap"><div class="left"></div><div class="right">这里要多出来一个文字</div></div></body></html>

#15、IE67 li间隙问题

解决办法

1、给li加vertical-align: middle;

2、给li浮动

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>ul{margin: 0;padding: 0;list-style: none;width: 200px;}li{width: 200px;height: 30px;border: 1px solid #f00;/*vertical-align: middle;*/float: left;}li span{float: left;}li a{float: right;}</style></head><body><ul><li><span>标题</span><a href="#">更多</a></li><li><span>标题</span><a href="#">更多</a></li><li><span>标题</span><a href="#">更多</a></li><li><span>标题</span><a href="#">更多</a></li></ul></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。