浏览器的兼容性详解

时间：2021-05-17 04:44:08
  1. html5标签的兼容性，由于IE6/IE7/IE8出来的较早，不支持html5标签，解决方案有两种。
    (a)通过js在IE6/IE7/IE8中创建html元素，然后认为的添加一些默认的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
 <!-- 创建元素 -->
 document.createElement("header");
 document.createElement("section");
 document.createElement("footer")
</script>
<style>
header{
width:300px;
height:300px;
background:red;
/*添加默认的样式*/
display: block;

}

section {
width:200px;
height:200px;
background:yellow; 
display: block; 
}

footer {
width:100px;
height:100px;
background: blue;
display: block;
}
</style>
</head>
<body>
<header>header</header>
<section>section</section>
<footer>footer</footer>
</body>
</html>

如上面代码片段，IE6/IE7/IE8中并不存在html5标签<header><section><footer>可以先创建标签，然后添加对应的样式。缺点：如果有很多html5标签，都需要进行创建，比较麻烦。j

(b)引用js文件,html5shiv.js，引用这个js文件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="html5shiv.js"></script>
<style>
header{
width:300px;
height:300px;
background:red;


}

section {
width:200px;
height:200px;
background:yellow; 

}

footer {
width:100px;
height:100px;
background: blue;

}
</style>
</head>
<body>
<header>header</header>
<section>section</section>
<footer>footer</footer>
</body>
</html>

这样也可以解决html5标签的兼容性。
2.元素浮动之后，能设置宽度的话就给元素加宽度，如果需要宽度是内容撑开，则给里面的块元素加浮动。解决了IE6浏览器的兼容性，使浮动的块级元素可以在一行显示。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
overflow: hidden;
width: 500px;
background: red;
}
.left{
float:left;

}
.right{
float:right;
}

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


</div>
</body>
</html>

在IE6浏览器下测试如上的代码，会发现“左边”与“右边”两个div并不在同一行显示。所以正确的解决方案是给浮动的元素的块级子元素加上浮动。即为给里面的h3标签添加浮动。因为块级元素默认撑开一行的，所以我们也可以给可以为块级元素(父级块元素或者子级块元素添加添加宽度，不让它们撑满一行)，这两个解决方案都可以解决IE6不在一行显示的问题。

3.第一块元素浮动，第二块元素加margin值等于第一块元素的宽度，在IE6会存在间隙的问题。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:500px;
height: 500px;
background-color: red;
}

body{
margin:0;
}

.left {
width: 200px;
height: 200px;
float: left;
background-color: green;
}
/*第一块元素浮动，第二块元素加margin值等于第一块元素的宽度*/
.right{
width: 200px;
height: 200px;
margin-left: 200px;
background-color: blue;
}

</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

在IE6下上例中的两个div块会存在间隙，因为浮动会破坏文档流，提升文档的层级，所以正确的做法给第二块元素也添加浮动，这样的文档流处在同一个层级就不会出现这个问题了。当然最好不要采用例子中的写法，免得带来意想不到的问题。
4. IE6下子元素超出父级元素的宽高，会把父级元素的宽高撑开

   <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
background-color: red;
border:10px black solid;
}
.item{
height:200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="item">

</div>
</div>
</body>
</html>

这个问题就比较严重了，影响布局。解决方案：原则上不允许子元素超出父级元素的宽高。
5. p,td,h标签不能嵌套块元素。
6. margin的兼容性问题。首先熟悉margin的特性：margin-top向上传递,相邻元素的上下margin叠加在一起的。首先，解决margin传递的问题，给父级元素添加border样式，同时为了兼容IE6,7浏览器需要触发haslayout,因而加上*zoom:1;如下面的代码片段：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
background-color: green;
border:solid 1px #000;
*zoom:1;
}

.item{
margin:50px;
width: 200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>

至于margin叠加，尽量使用一个方向的margin就可以了。
8. IE6下浏览器最小高度的问题。IE6下的div拥有最小的高度19px; 

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{

height:1px;
background-color: red;
/*兼容IE6下浏览器的最小高度*/
*overflow: hidden;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

给元素添加*overflow:hidden;即可以解决对IE6浏览器的兼容。
9.IE6下双边距。IE6下当元素浮动之后再设置margin值，就会产生双边距的问题。当然只有margin-left才能产生双边距。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:100px;
height:100px;
margin-left:50px;
background-color: red;
float:left;
}
</style>
</head>
<body>
<div>
        div
</div>
</body>
</html>

解决方法，给元素加上*display:inline;这样即可以解决对IE6的兼容。
10. li里元素都浮动，在IE6,7下会产生4px的间隙问题。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.list {
width: 300px;
list-style: none;
padding: 0;
margin: 0;
}

.list li{
border:solid 1px #000; 
overflow: hidden;
/*解决对IE6，7的兼容性*/
*vertical-align: top;

}

a{
float:left;
}

span {
float:right;
}
</style>
</head>
<body>
<ul class="list">
<li>
<a href="">左边</a>
<span>右边</span>
</li>
<li>
<a href="">左边</a>
<span>右边</span>
</li>
</ul>

</body>
</html>
  1. IE6下绝对定位元素，父级宽高是奇数，绝对定位元素的right和bottom会有1px的偏差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:307px;
height:307px;
position: relative;
background-color: green;
}

.content {
position: absolute;
width:30px;
height: 30px;
background-color: red;
right: 0px;
bottom: 0px;
}

</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>


</body>
</html>

解决方法：不要让绝对定位元素的父级宽高为奇数.
12. IE6下文字溢出bug,浮动元素之间有注释或者内联元素，并且和父级元素宽度之差小于3px;在IE6会产生文字溢出bug.解决方案：两个浮动元素之间不允许有内联元素或者注释，或者子元素宽度和父级元素宽度之差大于3px;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.left{
float: left;
}

.right{
float: right;
width:400px;
}

.wrap {
width:400px;
}


</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<span></span>
<div class="right">&darr;cdcdascdcdacadcacacd多出来的这是</div>
</div>

</body>
</html>
  1. IE6,7 下父级元素的overflow:hidden;包含不住子集元素的position:relative;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
border: solid #000 solid;
overflow: hidden;
/*给父级元素添加相对定位*/
*position: relative;
}

.content {
width: 400px;
height: 400px;
background-color: blue;
position: relative;
}

</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>

解决方案：给父级元素添加*display:inline;
14. IE6下绝对定位元素和浮动元素并列，绝对定位元素消失.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
border:solid 1px #000;
position: relative;
}
.item {
width:150px;
height:150px;
float:left;
background-color: red;

}
span {
width:50px;
height:50px;
background-color: yellow;
display: block;
position: absolute;
top:-10px;
right: -10px;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<span></span>
</div>
</body>
</html>

解决方案：不让绝对定位元素和浮动元素并列，这样绝对定位元素就不会消失。
15， IE6,7,8,9下的input间隙问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 200px;

border: solid #000 1px;
background-color: red;
}

input {
width: 200px;
height:30px;
border: 0;
*float: left;
}
</style>
</head>
<body>
<div class="box">
<input type="text">
</div>
</body>
</html>

会出现上下各1px的偏差，解决方法是添加float:left;提升文档流层级半级。

16.IE 6，7,8下输入类型控件背景问题，背景会发生移动。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input {
/**/
background: url(mail.jpg) no-repeat fixed;

}
</style>
</head>
<body>
<input type="text">
</body>

加上fixed样式即可。

css hack针对不同的浏览器写不同的CSS样式,\9针对所有IE10之前的浏览器，*针对IE7之前的浏览器,_针对IE6之前的浏览器.

17.IE6不支持png24图片，解决办法是引用一个DD_belatedPNG_0.0.8a.js库即可

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script>
 DD_belatedPNG.fix("img, div");
</script>
<style>
body{
background-color: red;
}
div{
width: 300px;
height: 300px;
background: url("img/png.png") no-repeat;
}
</style>
</head>
<body>
<div></div>
<img src="img/png.png" alt="" />
</body>
</html>

但是这个方法不支持body下的png24的处理，_background-image:none;_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”XX.png”, sizingMethod=”crop”);添加滤镜的方式来让IE6支持png-24的格式。
标签：

相关文章