IE8的兼容性问题

IE的兼容性问题是前端开发人员的老大难问题，不过随着时代的发展，IE6逐渐的被淘汰，如今以及不多有网站兼容IE6了，通常都兼容到IE8，如今我总结了一些IE8的兼容性问题及解决方法。

1.使用meta标签调节浏览器的渲染方式

IE8中有一个“兼容性视图”的概念，当初IE8发布时，相对于IE6/7已经作出了很是大的改进，可是不少老站点仅针对IE6/7进行了优化，使用IE8渲染反而会一团糟。为了照顾这些苦逼的前端工程师，IE8加入了“兼容性视图”功能，这样的话就能够在IE8中使用IE6或IE7的内核渲染页面。这个固然不是咱们想要的，因此须要使用meta标签来强制IE8使用最新的内核渲染页面，代码以下：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

　　IE=edge表示强制使用IE最新内核，chrome=1表示若是安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame（可让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Chrome浏览器内核），那么就用Chrome内核来渲染。

2.实现css3的某些特性

IE8不支持CSS3的不少新特性，不过咱们可使用一些比较成熟的hack方法，我采用的是CSS3 PIE，它支持的特性有这些：border-radius、box-shadow、border-image、multiple background images、linear-gradient等。

3.识别html5元素

若是你在前端代码中使用了HTML5的新标签（nav/footer等），那么在IE中这些标签可能没法正常显示。我使用html5shiv，具体使用方法见文档。

4.关于max-width

还有一个在IE8中常常遇到的问题就是max-width，网页中图片的尺寸可能比较宽，我会给它设置max-width: 100%来限制其宽度最大为父容器的宽度，可是有时候却不奏效，慢慢摸索才得知IE解析max-width所遵循的规则：严格要求直接父元素的宽度是固定的。经实验发现Chrome所遵照的规则比IE松一些，因此这个问题应该不归属为IE兼容性问题，不过我仍是提一下吧。分享两个我遇到的场景：

(1)td中的max-width

若是针对td中的img元素设置max-width: 100%，在IE和Firefox你会发现不奏效，而在Chrome中倒是能够的。经查询发现须要给table设置table-layout: fixed，对此属性的具体解释见W3School。

(2)嵌套标签中的max-width

以下的HTML结构：

<div class="work-item">
    <a href="#" class="work-link">
        <img src="sample.jpg" class="work-image img-responsive">
    </a>
</div>

　　

最外层元素设置了固定宽度，可是对img设置max-width为100%却无效，后来才发现须要再对a标签设置，这样才能使最内层的img标签充满整个div。

.work-itemwidth: 100%

5.嵌套inline-block下padding元素重叠

html代码：

<ul>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
</ul>

css代码：

ul li{
    display: inline-block;
}
ul li a{
    display: inline-block;
    padding: 10px 15px;
}

按理来讲a标签之间的距离应该是30px，但在IE8中出现了重叠，只有15px。个人解决方法是使用float: left替代display: inline-block实现水平布局。

6.placeholder

IE8下不支持HTML5属性placeholder，不过为解决此问题的js插件挺多的，好比：jquery-placeholder。

7.img标签上下有3px的留白

解决办法： 1.给元素加font-size: 0 ;

               2.给img标签加float: left;

8.png24的图片格式有背景图

将图片的格式改成png8的格式