IE6、IE7的一些兼容

最新推荐文章于 2024-05-15 16:35:17 发布

sishuirou

最新推荐文章于 2024-05-15 16:35:17 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/sishuirou/article/details/84235215

版权

目录
1:元素浮动之后，能设置宽度的话就给元素加宽度，如果需要宽度是内容撑开，就给它里边的块元素加上浮动;
2:第一块元素浮动，第二块元素加nargin值等于第一块元素，在IE6下会有间隙问题;
3:IE6下子元素超出父级宽高，会吧父级的宽高撑开
4:p包含块元素嵌套规则

1：元素浮动之后，能设置宽度的话就给元素加宽度，如果需要宽度是内容撑开，就给它里边的块元素加上浮动;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
    width:400px;
    border:1px solid black;
    overflow:hidden;
    /* 
    overflow:hidden是用最简洁最方便的清除浮动的方法，
    但不是最好的，清除浮动还是要用伪类的方法好一些
    */
}
.left{
    float:left;
    background:orange;
}
.right{
    float:right;
    background:yellow;
}
a{
    display:block;
    margin:0;
}
h2{
    margin:0;
}
</style>
</head>
<body>
<div class="box">
    <div class="left">
        <h2>左边</h2>
    </div>
    <div class="right">
        <a href="javascript:;">右边</a>
    </div>
</div>
</body>
</html>

标准浏览器下是这样的,IE6下也是这样的
在这里插入图片描述
问题是如果给A元素与h2元素加上高度
在IE6下变成这样

代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
    width:400px;
    border:1px solid black;
    overflow:hidden;
}
.left{
    float:left;
    background:orange;
}
.right{
    float:right;
    background:yellow;
}
a{
    display:block;

    margin:0;
    height:30px;
}
h2{
    margin:0;
    height:30px;
}
</style>
</head>
<body>
<div class="box">
    <div class="left">
        <h2>左边</h2>
    </div>
    <div class="right">
        <a href="javascript:;">右边</a>
    </div>
</div>
</body>
</html>

height:30px加上这一行后IE6下出现问题，需要自适应的元素，一左一右就出现问题了，标签元素的特征与浮动元素的特征就冲突了。
为什么在IE6下浮动就没有生效？没有靠H2,A标签撑开元素呢？
分析一下，浮动属性是加给了div，但是h2是块元素，A标签是定义成了dispaly:block块元素默认就撑满一行的。
解决方案1：
IE6下让谁去浮动，让谁去自适应，就把浮动加给谁。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
    width:400px;
    border:1px solid black;
    overflow:hidden;
}
.left{
    float:left;
    background:orange;
}
.right{
    float:right;
    background:yellow;
}
a{
    display:block;
    float:left;
    margin:0;
    height:30px;
}
h2{
    float:left;
    margin:0;
    height:30px;
}
</style>
<!--
加上这一行后IE6下出现问题
需要自适应的元素，一左一右就出现问题了，标签元素的特征与浮动元素的特征就冲突了
为什么在IE6下浮动就没有生效？没有靠H2,A标签撑开元素呢？
分析一下，浮动属性是加给了div，但是h2是块元素A标签是定义成了dispaly:block，块元素默认就撑满一行的。
解决方案01
IE6下让谁去浮动，让谁去自适应，就把浮动加给谁。
-->
</head>
<body>
<div class="box">
    <div class="left">
        <h2>左边</h2>
    </div>
    <div class="right">
        <a href="javascript:;">右边</a>
    </div>
</div>
</body>
</html>

解决方案02
IE6下给A标签，H2标签加上宽度

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
    width:400px;
    border:1px solid black;
    overflow:hidden;
}
.left{
    float:left;
    background:orange;
}
.right{
    float:right;
    background:yellow;
}
a{
    display:block;
    margin:0;
    height:30px;
    width:50px;
}
h2{
    margin:0;
    height:30px;
    width:50px;
}
</style>
<!--
解决方案02
IE6下给A标签，H2标签加上宽度
-->
</head>
<body>
<div class="box">
    <div class="left">
        <h2>左边</h2>
    </div>
    <div class="right">
        <a href="javascript:;">右边</a>
    </div>
</div>
</body>
</html>