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

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

2016-09-28 13:12 381 查看
蓝鸥零基础学习HTML5第九讲 兼容性五
1.兼容性13

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.box {

width:400px;

}

.left {

float: left;

}

.right {

float: right;

width:400px;

}

</style>

</head>

<body>

<!--

在ie6下的文字溢出bug

 

子元素的宽度和父级的宽度如果相差小于3px的时候，

两个浮动元素中间有注释或者内联元素，就会出现文字溢出，内联元素越多，溢出越多

 

解决办法：用div把注释或者内联元素包起来

 -->

<div class="box">

<div class="left"></div>

<!-- 上面的是left部分 -->

<div>

<span></span>

<span></span>

</div>

<div class="right">老白是个大胖子</div>

</div>

</body>

</html>



2.兼容性14

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.box {

width:200px;

height: 200px;

border:1px solid #000;

position: relative;

}

a {

position: absolute;

width:40px;

height:40px;

background: red;

right: 20px;

top:0px;

}

ul {

width: 150px;

height: 150px;

background: yellow;

margin:0 0 0 50px;

padding:0;

float: left;

display: inline;

}

</style>

</head>

<body>

<!--

在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效

解决方法：

不让浮动元素和绝对定位元素是兄弟关系，用div或者其他标签把a标签包起来

 -->

<div class="box">

<ul></ul>

<div>

<a href="#"></a>

</div>

</div>

</body>

</html>

 


3.兼容性15

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.box {

width: 200px;

height: 200px;

border:1px solid #000;

overflow: auto;

position: relative;

}

.div {

width:150px;

height: 300px;

background: red;

position: relative;

}

</style>

</head>

<body>

<!--

在IE6.7下，子级元素有相对定位，父级overflow包不住子级元素

 

解决方法：给父级也加相对定位

 -->

<div class="box">

<div class="div"></div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html html5 蓝鸥 龙江
相关文章推荐
新的分享
章节导航