坑爹IE浏览器兼容性问题-实践性总结

前言

最近在解决公司官网兼容性问题（兼容要求：ie7+），于是借机总结一下ie浏览器的css兼容性问题，maybe后续会再总结一篇js的兼容性问题。

问题汇总及解决方法

列表li的楼梯Bug（IE6、IE7）

问题描述：li在IE7下呈楼梯状的效果，通常发生在li中放置了一些元素内容（比如说a）而且对其进行浮动，但li本身不浮动，此时在IE下就会有楼梯上了，具体先看下面的代码：

如图：

解决方法
1.让li也浮动

ul li{
    float:left;
}

2.改变li的显示方式

ul li{
    display:inline;
}

li / a 标签竖排出现莫名间距

如图：

解决方法
1.给a标签/li标签设置浮动

li / a{
    float:left;
    clear:both;
}

三个行内元素并排但有一个元素浮动，浮动的元素出现在下方

**html**
<p class="gift_nav">
    <span class="libao_zhongxin">新闻资讯/</span>
    <span class="gift_center">NEWS</span>
    <span class="dangqian_weizhi">当前位置：<a href="/dzz/home">官网首页&gt</a>
    <span class="zhongxin">新闻资讯</span>
    </span>
</p>

**css**
.gift_nav{
    width:100%;
    float:left;
    margin:0 auto;
    margin-top:40px;
 }
.libao_zhongxin{
    font-size:32px;
    font-family:'方正北魏楷书简体';
    color:#112763;
} 
.gift_center{
    font-size:16px;
    font-family:'方正北魏楷书简体';
    color:#112763;
}
.dangqian_weizhi{
    float:right;
    margin-top:15px;
    font-size:14px;
}

如图：

解决方法：
不要使用float定位，先对要浮动元素的父元素进行position:relative;定位然后对要右定位的元素进行position:absolute;right:0;top:15px;即可

li显示为inline但是没有浮动，ie7以下li并不能并排而是独占一行

**HTML**
<div class="pagination_outer">
    <ul class="pagination">
        <li><a class="btn btn-default <?php if($page-1<1){ echo 'disabled'; } ?>" role="button" href="<?php echo "$listurl?page=".($page-1)."&".$params; ?>" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        <li><a class="btn btn-default" href="<?php echo "$listurl?page=".$page."&".$params; ?>"><?php echo $page; ?></a></li>
        <li><a class="btn btn-default <?php if($page+1>$totalPage){ echo 'disabled'; } ?>" <?php if($page+1>$totalPage){echo "style='display:none;'";}?> href="<?php echo "$listurl?page=".($page+1)."&".$params; ?>"><?php echo $page+1; ?></a></li>
        <li><a class="btn btn-default <?php if($page+2>$totalPage){ echo 'disabled'; } ?>" <?php if($page+2>$totalPage){echo "style='display:none;'";}?> href="<?php echo "$listurl?page=".($page+2)."&".$params; ?>"><?php echo $page+2; ?></a></li>
        <li><a class="btn btn-default <?php if($page+1>$totalPage){ echo 'disabled'; } ?>" href="<?php echo "$listurl?page=".($page+1)."&".$params; ?>" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
    </ul>
</div>

**CSS**
.pagination_outer{
    width:100%;
    height:74px;
    float:left;
    text-align:center;
}
.pagination_outer .pagination a{
    float:none;
    border-radius:0 !important;
}

解决方法
1.使li浮动
2.使ul浮动

上一个相邻块设置了高度，但是它实际内容超出了高度，ie浏览器中下一个块会跟在它所设置的高度屁股后面而不是被实际内容挤下到下面

**html**
<div class="gift-container">
    <div classs="content"></div>
</div>
<div class="footer"></div>
**css**
.gift_container {
    width: 1120px;
    height: 800px;
    margin: 0 auto;
    margin-top: 468px;
}
//实际上content的内容超过了800px
.footer {
    width: 100%;
    color: #fffcfd;
    font-size: 15px;
    overflow: hidden;
    margin-top: 15px;
}

如图：

解决方法
很简单，把设置的高度去掉就好啦。。。/笑哭

给div设置了overflow-y:auto，ie7浏览器下overflow-x默认为overflow-x:visible;

div{
    padding:0 40px;
    background:#fff;
    height:1072px;
    overflow-y:auto;
}
    

如图：

IE浏览器计算属性：

解决方法：
overflow-x:hidden

包含浮动元素的div所需的宽度在ie浏览器下比在标准浏览器下要宽

如图：

---

参考资料 - 鸣谢

IE常见Bug——part1