WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【02】
#兼容問題目錄
8、IE6不支持固定定位
9、IE6下前面元素浮動，后面元素不浮動后他們之間會有間隙
10、IE6下雙邊距問題
11、IE67下父級有邊框，子級有margin的話會不起作用
12、IE6下，每行元素的寬度與父級的寬度相差超過2px，最后一行的margin-bottom會失效（IE7不管相差多少，直接失效）
13、IE6下元素中除了文字之外，還有inline-block類型元素，元素的行高會失效
14、IE6下文字溢出的問題
15、IE67li間隙問題
后續兼容性問題處理鏈接地址
http://blog.csdn.net/baidu_37107022/article/details/71972223
http://blog.csdn.net/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布局出發方式鏈接：http://blog.csdn.net/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>總結
以上是生活随笔為你收集整理的WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【02】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WEB前端：浏览器（IE+Chrome+
- 下一篇： WEB前端：浏览器（IE+Chrome+