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

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

2016-09-27 10:38 267 查看
蓝鸥零基础学习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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML 蓝鸥
相关文章推荐
新的分享
章节导航