WEB前端：瀏覽器（IE+Chrome+Firefox）常見相容問題處理--03
阿新 • • 發佈：2019-01-10
相容問題目錄
16、IE67下子級有相對定位，並且比父級要大。那父級overflow:hidden;後是包不住它的
17、IE6下同一層級的浮動元素會蓋住絕對定位元素
18、IE6下定位父級的寬高是奇數的話，元素的right值或者bottom值會有1px的偏差
19、IE6下通過margin負值，使元素移出父級的位置，那出去的部分會被截掉
20、IE67下輸入型別的表單控制元件，上下兩邊各有1px的間隙
21、IE8以及IE8之前不識別H5標籤
22、IE6不支援png透明圖片
後續相容性問題處理連結地址
16、IE67下子級有相對定位，並且比父級要大。那父級overflow:hidden;後是包不住它的
解決辦法
給父級也加相對定位
程式碼演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
border: 5px solid #f00 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>