#兼容问题目录
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><!--IE6不支持固定定位,可以用js来解决--><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><!--IE6下前面元素浮动,后面元素不浮动后他们之间会有间隙解决办法给后面元素也添加浮动--><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><!--IE6下块元素有浮动,并且有横向margin(左右),那最终的距离是原来的两倍解决方法给元素添加display:inline;--><div></div><!--<span></span>--></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><!--在IE67下,父级有边框,子级有margin,那子级的margin会不起作用解决办法触发父级的layout--><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><!--IE6下,每行元素的宽度与父级的宽度相差超过2px,最后一行的margin-bottom会失效IE7下,不管宽度相差多少,直接失效解决方法用padding解决--><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><!--在IE6下,元素中除了文字之外,还有inline-block类型元素,那元素的行高会失效解决办法: 分别包起来,分别设置行高--><!--<div><span>inlin-block</span>这是一段文字</div>--><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><!--在IE6下,两个浮动元素中间有注释或者空行内标签,父级的宽度和子元素宽度相差小于3px,元素内的文字会被复制出来解决办法1、把注释或者行内元素用div包起来3、把父级的宽度加3px--><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><!--IE67下,li里有左右浮动的元素,会造成每个li下边有间隙的问题解决办法1、给li加vertical-align: middle;2、给li浮动--><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>