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

最新推荐文章于 2024-07-24 17:16:26 发布

蓝鸥_HTML5学习

最新推荐文章于 2024-07-24 17:16:26 发布

阅读量213

点赞数

文章标签： html html5 蓝鸥龙江 css

本文链接：https://blog.csdn.net/lanoulongjiang/article/details/52678477

版权

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

1.兼容性7

<!DOCTYPE html>

<head>

<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>

</body>

</html>

2.兼容性8

<!DOCTYPE html>

<head>

<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的值会扩大两倍

-->

</body>

</html>

3.兼容性9

<!DOCTYPE html>

<head>

<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>

</body>

</html>

蓝鸥_HTML5学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
蓝鸥零基础学习HTML5第九讲兼容性三

蓝鸥零基础学习HTML5第九讲兼容性三
复制链接

扫一扫

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

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