css常见兼容问题
H5标签兼容在IE6,7下的兼容
HTML5的标签在IE6, 7下不能使用,比如
解决方案:引用一个js的库文件。
增加<script src="js/html5shiv.js"></script>的引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/html5shiv.js"></script>
<style>
header{
width: 200px;
height: 200px;
display: block;
background-color: red;
}
section{
width: 150px;
height: 150px;
display: block;
background-color: yellow;
}
footer{
width: 100px;
height: 100px;
display: block;
background-color: blue;
}
</style>
</head>
<body>
<header>header</header>
<section>section</section>
<footer>footer</footer>
</body>
</html>
问题:在IE6..下的元素浮动问题
问题描述:在ie6下,一个浮动元素内部子元素为块级元素时,块级元素会撑破作为浮动元素的父级,占据父级元素所在的一行,不被父级包裹。
解决方案:为块级的子元素添加浮动,就会被父级包裹。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 400px;
border: 1px solid black;
overflow:hidden;
}
.left{
float: left;
background-color: red;
}
.right{
float: right;
background-color: blue;
}
h2{
float: left;
margin: 0;
height: 30px;
}
</style>
<!--
解决方案:h2元素添加float: left;
-->
</head>
<body>
<div class="box">
<div class="left">
<h2>左边</h2>
</div>
<div class="right">
<h2>右边</h2>
</div>
</div>
</body>
</html>
在IE 下浮动元素与非浮动元素之间会莫名的产生间隙。
解决方案:为非浮动元素添加浮动属性。
IE6下子元素超出父级宽高,会把父级的宽高撑开。而在其他浏览器下不会,只是脱离父级的包裹而已,父级的宽高不改变。
有三个块级元素不能包含块元素
不能包含块级元素否则会产生布局的bug.
<p>标签
<td>标签
<h1>~<h6>标签
margin-top传递
问题描述:子元素使用margin-top属性时,会把margin-top传递给父级元素,使得父元素具有了margin-top属性和属性值
解决方案: 使父元素触发BFC和haslayout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
background-color: green;
overflow: hidden;//触发BFC
zoom:1;//触发haslayout
}
.item{
height: 50px;
background-color: red;
margin-top: 50px;
}
.mt100{
margin-top: 100px;
}
</style>
<!--
1、margin-top传递
触发BFC、haslayout
2、上下margin叠压
尽量使用同一方向的margin,比如都设置top或者bottom,
-->
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item mt100"></div>
</div>
</body>
</html>
IE6兼容display:inline-block;
问题描述:在ie6下没有display: inline-block属性,所以可以通过hack方案模拟解决。
解决方案: *display:inline;
*zoom:1;
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
*display:inline;
*zoom:1;
}
</style>
<!--
解决方案:
*display:inline;
*zoom:1;
-->
</head>
<body>
<div>div</div>
<div>div</div>
<div>div</div>
</body>
</html>
在IE6下有默认最小的高度19px;
问题描述: 在设置元素最小高度时,ie6下的元素默认最小为19px;如果元素设置的高度小于19px,会导致设置的最小高度无效。
解决方案:为该元素添加overflow: hidden;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 1px;
background-color: red;
overflow: hidden;
}
</style>
<!--
IE6下最小高度19px
解决方案:
overflow:hidden;
-->
</head>
<body>
<div></div>
</body>
</html>
浮动下的IE6,7双边距
问题描述: 当元素浮动后再设置margin值就会产生双倍边距。
解决方案:针对IE6 ,7 添加display: inline;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
margin: 0;
}
.box{
width: 750px;
border: 1px solid #000;
overflow: hidden;
}
.item{
width: 200px;
height: 200px;
background-color: red;
margin-left: 50px;
float: left;
*display: inline;
}
</style>
<!--
当元素浮动后再设置margin那么就会产生双倍边距
解决方案:
针对ie6、7添加display:inline
-->
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
IE6,7下的4px问题。
问题描述: li元素里面的子元素浮动,会导致该li元素下方产生4px的间隙。
解决方案:
针对ie6,7添加vertical-align: top;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.list{
margin: 0;
padding: 0;
list-style: none;
width: 300px;
}
.list li{
height: 30px;
border: 1px solid red;
line-height: 30px;
*vertical-align: top;
}
.list li a{
float: left;
}
.list li span{
float: right;
}
</style>
<!--
解决方案:
针对ie6,7添加vertical-align: top;
-->
</head>
<body>
<ul class="list">
<li>
<a href="">左边</a>
<span>右边</span>
</li>
<li>
<a href="">左边</a>
<span>右边</span>
</li>
<li>
<a href="">左边</a>
<span>右边</span>
</li>
<li>
<a href="">左边</a>
<span>右边</span>
</li>
</ul>
</body>
</html>
浮动元素之间注释,导致多复制一个文字问题
.wrap{
width: 400px;
}
.left{
float: left;
}
.right{
width: 398px;
float: right;
}
IE6,7下,父级元素的overflow: hidden属性 包裹不住具有relative属性的子元素。
解决方案: 给父元素添加relative属性,使其在同一级之中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
border: 10px solid black;
overflow: hidden;
*position: relative;
}
.content{
width: 400px;
height: 400px;
background-color: blue;
position: relative;
}
</style>
<!--
解决方案:
针对ie6、7给父级元素添加相对定位
-->
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
IE6下会的兼容
问题1:在IE6下绝对定位元素的父级元素宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差。
问题2:浮动元素和绝对定位元素是同级的话定位元素就会消失。
解决方案:只要让他们俩不处于同级就可以避免这个bug。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
}
.item{
width: 150px;
height: 150px;
background-color: red;
float: left;
margin-left: 50px;
*display: inline;
}
.box span{
width: 50px;
height: 50px;
background-color: yellow;
position: absolute;
right: -10px;
top: -10px;
}
</style>
<!--
解决方案:
浮动元素和绝对定位元素是同级的话定位元素就会消失。所以咱们只要让他们俩不处于同级就可以避免这个bug。
-->
</head>
<body>
<div class="box">
<div class="item"></div>
<p>
<span></span>
</p>
</div>
</body>
</html>
问题3:IE6下input的空隙
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 200px;
border: 1px solid #000000;
background-color: red;
}
.box input{
border: 0;
margin: 0;
width: 200px;
height: 30px;
background-color: #fff;
*float: left;
}
</style>
<!--
解决方案:
给input元素添加float
-->
</head>
<body>
<div class="box">
<input type="text" />
</div>
</body>
</html>