WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【03】
#兼容問題目錄
16、IE67下子級有相對定位，并且比父級要大。那父級overflow:hidden;后是包不住它的
17、IE6下同一層級的浮動元素會蓋住絕對定位元素
18、IE6下定位父級的寬高是奇數的話，元素的right值或者bottom值會有1px的偏差
19、IE6下通過margin負值，使元素移出父級的位置，那出去的部分會被截掉
20、IE67下輸入類型的表單控件，上下兩邊各有1px的間隙
21、IE8以及IE8之前不識別H5標簽
22、IE6不支持png透明圖片
后續兼容性問題處理鏈接地址
http://blog.csdn.net/baidu_37107022/article/details/71972223
http://blog.csdn.net/baidu_37107022/article/details/71973570
#16、IE67下子級有相對定位，并且比父級要大。那父級overflow:hidden;后是包不住它的
解決辦法
給父級也加相對定位
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>#box{width: 200px;height: 200px;border: 5px solid #f00;overflow: hidden;position: relative;}#box div{width: 300px;height: 300px;background: green;position: relative;}</style></head><body><!--IE67下子級有相對定位，并且比父級要大。那父級overflow:hidden;后是包不住它的解決辦法給父級也加相對定位--><div id="box"><div></div></div></body> </html>#17、IE6下同一層級的浮動元素會蓋住絕對定位元素
解決辦法
給定位元素外面嵌套一個層
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;border: 5px solid #f00;position: relative;}.box div{width: 150px;height: 150px;background: green;float: left;display: inline;margin-left: 50px;}span{width: 100px;height: 100px;background: yellow;position: absolute;right: 0;top: 0;}</style></head><body><!--IE6下同一層級的浮動元素會蓋住絕對定位元素解決辦法給定位元素外面嵌套一個層--><div class="box"><div></div><!--<span>kaivon</span>--><p><span>kaivon</span></p></div></body> </html>#18、IE6下定位父級的寬高是奇數的話，元素的right值或者bottom值會有1px的偏差
無法解決
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;border: 10px solid #f00;position: relative;}.box div{width: 50px;height: 50px;background: green;position: absolute;right: -10px;bottom: -10px;/*left: -10px;top: -10px;*/}</style></head><body><!--在IE6下，定位父級的寬高是奇數的話，元素的right值或者bottom值會有1px的偏差--><div class="box"><div></div></div></body> </html>#19、IE6下通過margin負值，使元素移出父級的位置，那出去的部分會被截掉
解決方法
給元素添加相對定位，或者給父級overflow:hidden;
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;border: 1px solid #f00;}.box div{width: 100px;height: 100px;background: green;margin: -10px 0 0 -10px;}</style></head><body><!--IE6下通過margin負值，使元素移出父級的位置，那出去的部分會被截掉解決方法給元素添加相對定位，或者給父級overflow:hidden;--><div class="box"><div></div></div></body> </html>#20、IE67下輸入類型的表單控件，上下兩邊各有1px的間隙
解決辦法
給控件加浮動
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{border: 1px solid #f00;overflow: hidden;zoom: 1;}div input{float: left;}</style></head><body><!--IE67下輸入類型的表單控件，上下兩邊各有1px的間隙解決辦法給控件加浮動--><div><input type="text" /></div></body> </html>#21、IE8以及IE8之前不識別H5標簽
無法解決
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script>document.createElement('header');document.createElement('nav');</script><script src="js/html5shiv.min.js"></script><style>header{width: 100px;height: 100px;background: red;/*display: block;*/}nav{width: 200px;height: 200px;background: green;}</style></head><body><!--IE8以及IE8之前不識別H5標簽--><header>頭部</header><nav>導航</nav></body> </html>#22、IE6不支持png透明圖片
使用插件
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="js/DD_belatedPNG_0.0.8a.js"></script><script>DD_belatedPNG.fix('img,div');</script><style>body{background: #ccc;}div{width: 300px;height: 300px;background:url(img/1.png);}</style></head><body><!--IE6不支持png-24透明圖片--><img src="img/1.png"/><div></div></body> </html>導入插件處理
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="js/DD_belatedPNG_0.0.8a.js"></script><script>DD_belatedPNG.fix('body');/** 這個插件不支持body的背景*/</script><style>/** 用濾鏡的話就必需給body高度*/body{height: 500px;background: #ccc url(img/1.png) no-repeat;_background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/1.png", sizingMethod="crop");}</style></head><body></body> </html>總結
以上是生活随笔為你收集整理的WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【03】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WEB前端：浏览器（IE+Chrome+
- 下一篇： Eclipse导入项目常见问题----j