IE兼容性问题

对于IE的兼容性问题早有耳闻，也在网上搜索过有关信息，内心有过触动但也没有达到深恶痛绝的地步。直到最近，由于公司开发需要，需要对IE8浏览器支持，在对IE进行兼容的过程中，我领悟了程序员在面对IE时的痛苦与无奈。

网上搜索截图 网上技术博客截图

下面是我在开发中遇到的一些问题：

1、opacity兼容性

W3C手册对opacity 属性定义为设置元素的不透明级别。使用opacity需要浏览器支持 opacity 属性。对于IE8以及更早的版本可以使用 filter 属性。例如：filter:Alpha(opacity=50)。

参考地址：https://www.cnblogs.com/lidengfeng/p/6957124.html

---

2、rgba兼容性

rgba同样可以设置透明度，但它比opacity更加丰富，还可以设置背景的颜色。r代表red（红色），g代表green（绿色），b代表blue（蓝色），a代表透明度。IE8是不支持rgba的，可以使用filter替代，代码如下

background: rgba(0,0,0,.5); /*支持rgba的浏览器*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); /*IE8支持*/

对它详细介绍请参考：https://segmentfault.com/a/1190000002485299

对于我遇到的问题是这样，css代码如下

background-color:rgba(221,221,221,0.8);

IE8下背景颜色不显示
谷歌火狐下显示

使用上面介绍方法，效果不怎么理想，因为这里设置的是background-color属性，所以我是这样解决的，css代码如下

background-color:rgba(221,221,221,0.8);

background-color: #DCE1E3;

使用取色器取背景色，直接设置它的背景颜色，同样达到相同样式。

---

3、IE8下样式错乱

IE8中的样式

在火狐和谷歌浏览器中样式都是好的，但是在IE8下样式就变成了上面的图那样，在排除因为定位问题和其他原因导致的之后，hack方式是我只能选择的方式，在需要单独给IE调整的样式后面加上\9或者\9\0或者\0

“\9″ IE6/IE7/IE8/IE9/IE10都生效

“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

这里我不在多说，参考地址如下

参考地址：http://blog.csdn.net/freshlover/article/details/12132801

---

4、input输入框兼容性

在IE8下input输入框的光标一般会靠上显示，设置line-height:100%;方可解决，属性后面也可使用像素，像素的值为输入框的height值，例如输入框height:35px，那么设置line-height:35px;即可。

---

以上仅供大家参考，如有不对请指正。