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- 100%来限制其宽度最大为父容器的宽度，但是有时候却不奏效，慢慢摸索才得知IE解析max-width所遵循的规则：严格要求直接父元素的宽度是固定的。经实验发现Chrome所遵守的规则比IE松一些，所以这个问题应该不归属为IE兼容性问题，不过我还是提一下吧。分享两个我遇到的场景：
(1)td中的max-width
如果针对td中的img元素设置max- 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>
最外层元素.work-item设置了固定宽度，但是对img设置max-width为100%却无效，后来才发现需要再对a标签设置 100%，这样才能使最内层的img标签充满整个div。
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的格式