css兼容问题处理--小技巧
原创
©著作权归作者所有：来自51CTO博客作者JackieDYH的原创作品，请联系作者获取转载授权，否则将追究法律责任
IE8兼容问题：
1）IE8下图片边框问题：
img{
border: none;
}
2）IE8中背景复合属性写法问题
3）IE低版本浏览器的透明度设置问题
4）指定鼠标指针形状为手型， 并兼容所有浏览器
IE低版本浏览器兼容问题：
5）在IE6及更早版本的浏览器中定义小高问题
6）IE6及更早版本浏览器中浮动时产生的双边距问题
7）IE7中子元素相对定位，父元素overflow:hidden|auto失效的问题
8）IE7及更早版本的浏览器中，块级元素转行块元素，不在一行显示问题
9）IE7及更早版本的浏览器中，在li中出现2个或两个以上的子元素有浮动，li之间会产生空白间隙问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
}
img{
vertical-align: top;
}
.box1 img{
border: none;
}
.box2{
width: 300px;
height: 200px;
border: 1px solid #000;
background: url(images/pic2.jpg)no-repeat 0 0;
}
.box3{
background: url(images/pic2.jpg) no-repeat 0 0;
}
.box4{
width: 100px;
height: 100px;
background: blue;
border: 2px solid #000;
}
.box41{
opacity: 0.5;
}
.box42{
opacity: 0.5;
filter: Alpha(opacity=50);
}
.box43{
background: rgba(0,0,255,.5);
}
.box5{
width: 100px;
height: 100px;
background: orange;
cursor: pointer;/*鼠标指针为手型*/
cursor: crosshair;/*鼠标指针为十字形*/
cursor: text;/*鼠标指针为文本的I型*/
cursor: wait;/*程序正忙*/
cursor: move;/*对象是可移动的*/
cursor: help;/*可用的帮助信息*/
cursor: default;/*默认光标*/
cursor: auto;/*默认*/
}
.box6{
width: 0;
height: 0;
border: 100px solid;
border-color: red blue;
}
.box62{
font-size: 0;
line-height: 0;
}
.box7{
overflow: hidden;
}
.box7 div{
width: 100px;
height: 100px;
background: yellow;
float: left;
margin-left: 20px;
display: inline;
}
.box8{
overflow: hidden;
}
.box8 div{
width: 100px;
height: 100px;
background: lightpink;
float: right;
margin-right: 20px;
display: inline;
}
.box9{
width: 200px;
height: 200px;
background: yellowgreen;
overflow: hidden;
position: relative;
}
.box9 div{
width: 100px;
height: 300px;
background: orange;
position: relative;
}
.box10 div{
width: 200px;
height: 200px;
border: 2px solid #000;
display: inline-block;
*display: inline;
*zoom: 1;
}
.box11{
margin: 0;
padding: 0;
list-style: none;
width: 500px;
}
.box11 li{
background: lightgreen;
line-height: 30px;
overflow: hidden;
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
}
.box11 a{
float: left;
}
.box11 span{
float: right;
}
</style>
</head>
<body>
<!-- IE8下图片边框问题: -->
<div class="box1">
<a href="#"><img src="images/pic2.jpg" alt="pic"></a>
</div>
<!-- IE8中背景复合属性写法问题： -->
<div class="box2"></div>
<div class="box2 box3"></div>
<!-- IE低版本浏览器的透明度设置问题： -->
<div class="box4 box41">opacity</div>
<div class="box4 box42">filter</div>
<div class="box4 box43"></div>
<!-- 指定鼠标指针形状为手型， 并兼容所有浏览器： -->
<div class="box5"></div>
<!-- 在IE6及更早版本的浏览器中定义小高问题： -->
<div class="box6"></div>
<div class="box6 box62"></div>
<!-- IE6及更早版本浏览器中浮动时产生的双边距问题： -->
<div class="box7">
<div></div>
<div></div>
<div></div>
</div>
<div class="box8">
<div></div>
<div></div>
<div></div>
</div>
<!-- IE7中子元素相对定位，父元素overflow:hidden|auto失效的问题： -->
<div class="box9">
<div></div>
</div>
<!-- IE7及更早版本的浏览器中，块级元素转行块元素，不在一行显示问题： -->
<div class="box10">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
<!-- IE7及更早版本的浏览器中，在li中出现2个或两个以上的子元素有浮动，li之间会产生空白间隙问题： -->
<ul class="box11">
<li><a href="#">列表项</a><span>2020-2-26</span></li>
<li><a href="#">列表项</a><span>2020-2-26</span></li>
<li><a href="#">列表项</a><span>2020-2-26</span></li>
</ul>
</body>
</html>
