首页 > 代码库 > 蓝鸥零基础学习HTML5第九讲 兼容性三
蓝鸥零基础学习HTML5第九讲 兼容性三
蓝鸥零基础学习HTML5第九讲 兼容性三
1.兼容性7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
background: red;
zoom:1;
}
.div {
width:200px;
height:200px;
background: blue;
margin:100px;
}
</style>
</head>
<body>
<!--
haslayout
在IE下大部分兼容性都是因为haslayout属性的触发问题，尽量触发haslayout属性，可以减少很多IE下的兼容下的问题。
在IE下父级有边框的时候，子元素的margin会失效
解决方法：触发父级的haslayout属性
-->
<div class="box">
<div class="div"></div>
</div>
</body>
</html>
2.兼容性8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0;
}
.box {
width:200px;
height: 200px;
background: red;
float:left;
margin:100px;
display: inline;
}
</style>
</head>
<body>
<!--
ie6下双边距的bug
在ie6下，块元素有浮动有横向的margin的值的时候，横向的margin的值会扩大两倍
-->
<div class="box"></div>
</body>
</html>
3.兼容性9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
border:10px solid red;
float:left;
}
.box div {
width: 100px;
height: 100px;
background: red;
margin-right: 30px;
border:5px solid #000;
float:left;
display: inline;
}
</style>
</head>
<body>
<!--
margin-left 一行中左侧的第一个元素有双边距
margin-right 一行中右侧的第一个元素有双边距
-->
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
蓝鸥零基础学习HTML5第九讲 兼容性三