兼容问题目录
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>