1.兼容性13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:400px;
}
.left {
float: left;
}
.right {
float: right;
width:400px;
}
</style>
</head>
<body>
<!--
在ie6下的文字溢出bug
子元素的寬度和父級的寬度如果相差小於3px的時候，
兩個浮動元素中間有註釋或者內聯元素，就會出現文字溢出，內聯元素越多，溢出越多
解決辦法：用div把註釋或者內聯元素包起來
-->
<div>
<div></div>
<!-- 上面的是left部分 -->
<div>
<span></span>
<span></span>
</div>
<div>老白是個大胖子</div>
</div>
</body>
</html>
2.兼容性14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:200px;
height: 200px;
border:1px solid #000;
position: relative;
}
a {
position: absolute;
width:40px;
height:40px;
background: red;
right: 20px;
top:0px;
}
ul {
width: 150px;
height: 150px;
background: yellow;
margin:0 0 0 50px;
padding:0;
float: left;
display: inline;
}
</style>
</head>
<body>
<!--
在IE6下，當浮動元素和絕對定位元素是兄弟關係的時候，絕對定位會失效
解決方法：
不讓浮動元素和絕對定位元素是兄弟關係，用div或者其他標籤把a標籤包起來
-->
<div>
<ul></ul>
<div>
<a href="#"></a>
</div>
</div>
</body>
</html>
3.兼容性15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border:1px solid #000;
overflow: auto;
position: relative;
}
.div {
width:150px;
height: 300px;
background: red;
position: relative;
}
</style>
</head>
<body>
<!--
在IE6.7下，子級元素有相對定位，父級overflow包不住子級元素
解決方法：給父級也加相對定位
-->
<div>
<div></div>
</div>
</body>
</html>
