标签：play loader color transform splay display es2017 har orm
一.IE6/IE7对 display-inblock支持的欠缺
Html代码：
<div class="nav"> <ul> <li><a href="">首页</a></li> <li><a href="">公司介绍</a></li> <li><a href="">联系我们</a></li> </ul> </div>
css代码：
.nav{
text-align: center;
}
ul li{
display:inline-block;
list-style-type:none;
}
ul li a{
text-decoration:none;
}
在主流浏览器中显示：
IE6/IE7中显示：
解决方法：
ul li{
display:inline-block;
list-style-type:none;
*display: inline;
}
二.IE6浮动下 margin双倍边距
html代码:
<div class="test"></div>
css代码：
.test{
background:#ccc;
width:80px;
height:80px;
margin-left:30px;
float:left;
}
IE6显示双倍边距
主流浏览器显示
解决方法在对应的样式中加display:inline 代码如下：
.test{
background:#ccc;
width:80px;
height:80px;
margin-left:30px;
float:left;
display:inline;
}
三.IE6/IE7显示垂直滚动条
表现描述：
有时候页面就几个字，根本没有超出显示范围，IE6/IE7还会显示垂直滚动条
解决方法：
.test{
overflow: auto;
}
四.IE6对margin:0 auto;不会正确的进行解析
html代码：
<div class="test"> <div class="test-title"></div> </div>
css代码：
.test-title{
background:#ccc;
width:80px;
height:80px;
margin:0 auto;
}
主流浏览器显示:
IE6显示：
解决方法 在父元素中使用text-align:center,在元件中使用text-align:left：
.test{
text-align: center;
}
.test-title{
background:#ccc;
width:80px;
height:80px;
margin:0 auto;
text-align:left;
}
五：IE6不支持css min-width与min-height
表现描述：
有时候想让一个div最小高度为100px，但ie6中识别min-height，可不识别
解决方法：
.test{
min-height:100px;
height:auto ! important;
height: 100px;
}
意思是：新的浏览器识别出min-height这个样式，当执行到第二行的时候又有!important，所以第三行不起作用。而在ie6中解析时，它不识别min-height和!important，所以直接就解析第三行height样式，继而间接实现了min-height。同理min-width也可以用这种方法实现
六.png图片透明
表现描述：png的图片在ie6中，透明的部分会显示成灰色
解决方法：
是一个争对png的hack，代码如下
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
标签：play loader color transform splay display es2017 har orm
原文地址：http://www.cnblogs.com/Jessical8619/p/7822440.html
