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

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

蓝鸥_HTML5学习

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

阅读量285

点赞数

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

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

版权

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

1.兼容性10

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

ul {

margin:0;

padding:0;

list-style: none;

width:300px;

}

li {

list-style: none;

height:30px;

border:1px solid #000;

/*float:left;*/

vertical-align: top;

}

a {

width:100px;

height:30px;

float:left;

background: red;

}

span {

width:100px;

height:30px;

float: right;

background: blue;

}

</style>

</head>

<body>

<!--

在IE6,7下，li本身没有浮动，li里面的内容有浮动，li下会产生一个间隙

解决方法：

1.给li加浮动

2.给li加vertical-align:top

-->

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

2.兼容性11

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

ul {

margin:0;

padding:0;

list-style: none;

width:300px;

}

li {

list-style: none;

height:12px;

border:1px solid #000;

overflow: hidden;

float:left;

/*vertical-align: top;*/

}

a {

width:100px;

height:12px;

float:left;

background: red;

}

span {

width:100px;

height:12px;

float: right;

background: blue;

}

</style>

</head>

<body>

<!--

在IE6,7下，li本身没有浮动，li里面的内容有浮动，li下会产生一个间隙

解决方法：

1.给li加浮动

2.给li加vertical-align:top

在IE6下最小高度的bug 和 li的间隙问题共存的时候，给li加浮动，vertical-align不好使

-->

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

3.兼容性12

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box {

border:10px solid red;

/*float:left;*/

width:600px;

overflow: hidden;

}

.box div {

width:100px;

height:100px;

background: blue;

border:5px solid #000;

margin:20px;

float: left;

display: inline;

}

</style>

</head>

<body>

<!--

当一行子级元素宽度之和和父级的宽度相差超过3px，或者子级元素不满行的情况的时候，最后一行的子级元素的margin-bottom会失效

-->

</div>

</body>

</html>

蓝鸥_HTML5学习

关注

0
点赞
踩
0

收藏

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

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

扫一扫

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

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