IE常见bug及其修复方法

一、双边距浮动的bug

二、3像素文本偏移bug

<div class="wrapper">
<span class="floatBox"></span>
<p>When people ask me for advice on blogging, I always respond with yet another form of the same advice: pick a schedule you can live with, and stick to it.
Until you do that, none of the other advice I could give you will matter. I don’t care if you suck at writing. I don’t care if nobody reads your blog.
I don’t care if you have nothing interesting to say. If you can demonstrate a willingness to write, and a desire to keep continually improving your writing,
you will eventually be successful.</p>
</div>

.wrapper {
width: 600px;
border: solid deeppink 5px;
}
.wrapper p {
margin:0 0 0 100px; /*不让段落环绕floatBox*/
}
.floatBox {
background-color: greenyellow;
float: left;
width: 100px;
height: 100px;
display: inline;
margin-right: -3px;
}　　

三、ie6 最小高度min-height不识别bug

.demo {
min-height: 100px;
height: auto !important;/*现代浏览器下，内容高度超过100px时自动获得其高度*/
height: 100px;/*此值设置和min-height值一样，因为IE6下元素高度会根据内容自己的高度而定，
所以内容高度低于min-height值时，为了达到min-height效果，需要给元素一个显式的高度值*/
}

.demo {
min-height: 100px;
height: 100px;
}
html>body .demo {
height: auto;/*只有现代浏览器才能识别*/
}

/* min-width for IE6 */
* html div.min-width {
width: expression(document.body.clientWidth < 301 ? "300px" : "auto");
}
/* min-width for standards-compliant browsers */
div.min-width {
min-width: 300px;
}

/* max-width for standards-compliant browsers */
div.max-width {
max-width: 300px;
}
/*max-width for IE6*/
*html div.max-width {
_height:expression(this.clientWidth > 299 ? "300px" : "auto");
}　　

/* max-height for standards-compliant browsers */
div.max-height {
max-height: 300px;
}
/*max-height for IE6*/
*html div.max-height {
_height:expression(this.scrollHeight > 301 ? "300px" : "auto");
}

四、浮动层错位

<div id="container">
<div id="left">http://net.tutsplus.com/</div>
<div id="right"></div>
</div>

#container{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: auto;
}
#left,#right{
background: #95CFEF;
border: solid 1px #36F;
width: 100px;
height: 150px;
margin: 30px;
padding: 10px;
float: left;
}　　

#left { overflow: hidden; }

五、IE6调整窗口大小的bug

六、无DOCTYPE引起的bug

ie

ie

w3c

ff

w3c

w3c

w3c

七、列表li楼梯bug

<ul>
<li><a href="#">Item Stairs Bug</a></li>
<li><a href="#">Item Stairs Bug</a></li>
<li><a href="#">Item Stairs Bug</a></li>
</ul>

ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li a{
width: 150px;
height: 30px;
line-height: 30px;
margin: 0 10px;
text-align: center;
color: #FFF;
text-decoration: none;
float: left;
background-color: #00aabb;
}

八、li空白间隙

<ul>
<li><a href="#">white space </a></li>
<li><a href="#">white space</a></li>
<li><a href="#">white space</a></li>
</ul>

ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li a{
display: block;
background-color: #f36696;
color: #FFF;
text-decoration: none;
}

ul li {
display:inline;
}
ul li a {
display:bloack;
}　

九、IE6的"藏猫猫"bug

.clearfix:after {
visibility: hidden;
overflow: hidden;
display: block;
content: ".";
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}
* html .clearfix {
zoom: 1;
}
*:first-child + html .clearfix {
zoom: 1;
}　　

十、IE浏览器部分版本不支持background-size的bug

.bg {
background: url("../images/login-bg.png") left top no-repeat;
background-size: 100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
/*注意这background-image: url 与 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale")路径要一样，并且是绝对路径 */
background-image: url("http://localhost:8080/OA/plug-in/login/images/login-bg.jpg");
background-size: cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://localhost:8080/OA/plug-in/login/images/login-bg.jpg",  sizingMethod="scale");
}

十一、父元素overflow:auto与position:relative 属性相遇bug

<div class="wrapper">
<div class="box"></div>
</div>

.wrapper {
height: 150px;
width: 150px;
background-color: #8ce29b;
overflow: auto;
}
.box {
width: 100px;
height: 200px;
margin: 25px;
position: relative;
background-color: #ff9890;
}

十二、使用 HTTP meta 的 IE=edge标记