本文详细介绍了HTML5在不同浏览器中的兼容性问题，包括IE6等浏览器下的盒模型计算、浮动布局等方面的具体表现及解决方案。
1.兼容性到底是什么玩意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
width:400px;
}
.left {
width:200px;
background: red;
height:300px;
float:left;
}
.right{
width: 200px;
float:right;
}
.div {
width:170px;
height:170px;
padding:15px;
background: blue;
}
</style>
</head>
<body>
<!--
兼容性：页面在不同的浏览器中可能会显示不同。
在IE6下，子级的宽度会撑开父级设置好的宽度
温馨小提示：盒模型的计算一定要精确，否则IE浏览器可能会显示不同
-->
<div id="box">
<div class="left"></div>
<div class="right">
<div class="div"></div>
</div>
</div>
</body>
</html>
2.兼容性2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:400px;
}
.left {
background: red;
float:left;
}
.right{
background: yellow;
float:right;
}
h3{
margin:0;
height:40px;
float:left;
}
</style>
</head>
<body>
<!--
ie6中，元素浮动，如果宽度需要内容撑开，需要给里面的块元素都添加浮动才可以
-->
<div class="box">
<div class="left">
<h3>左侧</h3>
</div>
<div class="right">
<h3>右侧</h3>
</div>
</div>
</body>
</html>
3.兼容性3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.left {
width:100px;
height:100px;
background: red;
float:left;
}
.right {
width:200px;
height:100px;
background: blue;
/*margin-left: 100px;*/
float: left;
}
</style>
</head>
<body>
<!--
在IE6.7下 元素要通过浮动排在同一排，就需要给这行元素都加浮动
-->
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
扫一扫
676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
