1.兼容性16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:200px;
height:200px;
border:1px solid #000;
position: relative;
}
.box span {
width:20px;
height:20px;
background: yellow;
position: absolute;
right:-1px;
bottom:-1px;
}
</style>
</head>
<body>
<!--
在IE6下，如果绝对定位的父级宽高是奇数的时候，子级元素的right和bottom值会有1px的偏差
-->
<div class="box">
<span></span>
</div>
</body>
</html>
2.兼容性17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
height: 2000px;
background: red;
}
.box {
width:200px;
height: 200px;
background: yellow;
position: fixed;
top:30px;
left:100px;
opacity: 0.5;
filter:alpha(opacity=50);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.兼容性18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:200px;
height:32px;
border:1px solid #000;
}
input {
width:100px;
height:30px;
border:1px solid blue;
margin:0;
padding:0;
float:left;
}
</style>
</head>
<body>
<!--
在IE6.7下 输入型的表单标签控件上下会有1px的间隙。
处理方法：给input加浮动
-->
<div class="box">
<input type="text">
</div>
</body>
</html>
