兼容性问题总结

1、<img>标签下的图片在IE9一下出现蓝色边框。

解决方案：

img{border:none;}

2、在IE7下的inline-block没用。

解决方案：

display:inline-block;
*display:block;

3、<a>标签之间有空格。

解决方案：

①浮动。

②如果<a>标签少的话就变成一行。如：

<a>插入</a><a>代码</a>

4、z-index的问题，主要是在于设置父级的z-index。且position必须为absolute、relative、fixed。

5、<input type=“text”>里面的文字，在IE8以下需要设置成text-align：center。

6、对于行内元素双击变蓝的问题。

解决方案：

　　　　　　　　　　<div class="leftchick">
                    <div class="bg"></div>
                    <span class ="lc" onselectstart="return false"></span>
                </div>
                <div class="rightchick">
                    <div class="bg"></div>
                    <span class="rc lc" onselectstart="return false"></span>
                </div>

 在IE7下面的overflow：hidden；没效果，设置之后还是显示。

html代码：

<div class="case_list">
                <div class="cell">
                    <ul>
                        <li><img src="image/home_page/index7_24.png"></li>
                        <li><img src="image/home_page/index7_26.png"></li>
                        <li><img src="image/home_page/index7_28.png"></li>
                        <li><img src="image/home_page/index7_30.png"></li>
                        <li><img src="image/home_page/case_03.png"></li>
                        <li><img src="image/home_page/case_06.png"></li>
                        <li><img src="image/home_page/case_08.png"></li>
                        <li><img src="image/home_page/case_11.png"></li>
                        <li><img src="image/home_page/case_17.png"></li>
                        <li><img src="image/home_page/case_18.png"></li>
                        <li><img src="image/home_page/case_19.png"></li>
                        <li><img src="image/home_page/case_20.png"></li>
                        <li><img src="image/home_page/case_25.png"></li>
                        <li><img src="image/home_page/case_26.png"></li>
                        <li><img src="image/home_page/case_27.png"></li>
                        <div class="clear"></div>
                    </ul>
                </div>

css部分：

#caseWrap .case_list{
    position: relative;
    float: left;
    
}
#caseWrap .cell{
    overflow: hidden;
    width: 600px;
    height: 80px;
    margin-left: 38px;
    margin-top: 24px;
}
#caseWrap .case_list ul{
    overflow: hidden;
    width: 99999px;
    height: 80px;
    position: relative;
}
#caseWrap .case_list li{
    float: left;
    margin: 0 5px;
}

解决方案：在".cell"中加入position：relative;

7. 盒模型Hack(Box Hack Model)
这是IE里最热门的bug了。基本的理解是，IE计算宽度(width)的方式不同。基于w3c标准，一个元素总宽度应该是
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是，IE计算宽度时没有加上填充和边框：
总宽度 = margin-left + width + margin-right
更多的细节，请参考这个链接：Internet Explorer和CSS盒模型详细解释
解决方法
使用w3c的标准兼容模式。IE6或者之后的版本能基于w3c的标准计算，但是你仍旧会在IE5中遇到问题。
或者你可以用CSS Hack来解决这个问题。所有标准兼容的浏览器都能读取w\\idth:180px 除了IE5。

8、overflow-y:auto时在IE7下出现下面的情况时：

通过给overflow:auto || scroll的元素添加position:relative；即可解决问题，记住：只要写了overflow：auto||scroll，都写上position:relative。