您的位置：首页 > Web前端 > HTML5

蓝鸥零基础学习HTML5第九讲 兼容性一

2016-09-26 13:21 344 查看
蓝鸥零基础学习HTML5第九讲 兼容性一1.兼容性到底是什么玩意<!DOCTYPE html><html><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></div> <div> <div></div> </div> </div></body></html>


2.兼容性2<!DOCTYPE html><html><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><div><h3>左侧</h3></div><div><h3>右侧</h3></div></div></body></html>

3.兼容性3<!DOCTYPE html>
<html>
<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>
<div></div>
<div></div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML 蓝鸥
相关文章推荐
新的分享
章节导航