1：使用meta标签调节浏览器的渲染方式（使用meta标签来强制IE8使用最新的内核渲染页面）
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
2:placeholder
IE8下不支持HTML5属性placeholder，不过为解决此问题的js插件挺多的，比如：jquery-placeholder。
3:last-child
first-child是CSS2的内容，但是last-child就不是了，推荐的做法是给最后一个元素设置一个.last的class，然后对此进行样式设置，这样就全部兼容了。
4:HTML5
为了IE兼容HTML5标签，加了 <!--[if lt IE8]><![endif]--> 注释，
5:关于max-width:，
（1）td中的max-width
如果针对td中的img元素设置max-width: 100%，在IE和Firefox你会发现不奏效，而在Chrome中却是可以的。经查询发现需要给table设置table-layout: fixed，对此属性的具体解释见W3School。
（2）嵌套标签中的max-width
如下的HTML结构：
最外层元素.work-item设置了固定宽度，但是对img设置max-width为100%却无效，后来才发现需要再对a标签设置width: 100%，这样才能使最内层的img标签充满整个div。
网页中图片的尺寸可能比较宽，我会给它设置max-width: 100%来限制其宽度最大为父容器的宽度，但是有时候却不奏效，慢慢摸索才得知IE解析max-width所遵循的规则：严格要求直接父元素的宽度是固定的
6:html5中音视频
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
7:.把overflow设置为auto，
IE6和火狐上显示都正常，在IE8上，她就是只显示一部分内容，其他内容其他卡掉。
解决方法：IE8是有两种解析模式的，一种是IE8 Standard Modes ：默认的最标准的模式，严格按照W3C相关规定，一种是IE7 Standards Modes ：IE7现在用的解析网页的模式。IE7还算是不错的浏览器，如果让IE8浏览器自动切换到IE7,IE6模式，那我们就不用为IE8布局兼容问题烦恼了，而这个开关只有一行代码：
或者
其实就是比较霸道的让ie8以ie7的标准或者是以 ie6 的标准去解析整个页面!
在网页的head里加入以上这段代码，用IE8访问时就会自动切换到IE7模式，如果你的网站在IE7下显示正常，那在IE8下也可以正常显示了。
8.Bootstrap3中使用了大量的Media Query特性，
但是IE8似乎无法识别，所以需要hack一下啦！Bootstrap3的官方文档中已经针对浏览器兼容性做了比较详细的说明，推荐采用Respond.js解决此问题，具体方法参见它的文档即可。
有一个地方需要注意的是，如果对Bootstrap3 media query声明的属性（比如.container
）进行覆盖，那在不支持media query的浏览器中Respond.js起作用后，会把你的覆盖样式再次覆盖。我的解决方案是在后面加上!important.
9.实现CSS3的某些特性
IE8不支持CSS3的很多新特性，不过我们可以使用一些比较成熟的hack方法，我采用的是CSS3 PIE，它支持的特性有这些：border-radius、box-shadow、border-image、multiple background images、linear-gradient等。
官方文档给出了2种使用方式，一种是引入.htc文件，另一种则是使用PIE.js。如果使用第一种方法（官方推荐），那么需要设置.htc文件的Content-Type为text/x-component。这个也好办，如果你是通过nginx来托管此文件，只要在Nginx的配置文件中加入一条MIME规则即可。我建议使用Flask来托管它（放在static文件夹中），这样更方便，然后只需加入下面的代码：
import mimetypesmimetypes.add_type('text/x-component', '.htc')
10.如果你想使用background-size: cover
设置全屏背景，很遗憾IE8办不到...但可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)
将sizingMethod设置为scale就OK了。还没完，如果你在此背景之上放置了链接，那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加position:relative使其相对浮动。
11.filter blur
CSS3中提供支持滤镜效果的属性filter，比如支持高斯模糊效果的blur（类似iOS7的效果）：
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
IE8对filter: blur(10px)的显示效果是对HTML元素进行小范围的模糊处理，这个效果并不是高斯模糊，要想支持高斯模糊，需要如下设置： filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
在实践中发现一个坑就是，所有position: relative的元素都不会生效。
12trime()
:js在IE8+兼容String没有trim方法，写一个兼容ie8一下的浏览器的trim()方法
//------------------js去掉字符串的空格----------------------------//
//去左空格;
function ltrim(s){
return s.replace(/(^/s*)/g, "");
}
//去右空格;
function rtrim(s){
return s.replace(/(/s*$)/g, "");
}
//去左右空格;
function trim(s){
//s.replace(/(^/s*)|(/s*$)/g, "");
return rtrim(ltrim(s));
}
13:.标签最低高度设置min-height不兼容
如果我们 要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
14:.indexOf
14-1问题
前端代码中有多处地方使用javascript数组的indexOf方法，用于查询某数组中是否存在某元素，然而测试，在IE8不支持数组元素的indexOf（）方法。如下
var location = ['1','2','3'];
var serverData = [‘1’ , ’4’, ‘5’];
for( var i = 0; i < serverData.length; i++ )
{
if(location.indexOf( serverData[i].location ) == -1 )
location.push( serverData[i]);
}
}
上述js代码的功能是将数组serverData出现的新元素添加如location中。该方法在火狐、chrome浏览器中支持，但在IE8中并不支持。
14-2解决办法
方法一：
数组元素转化为字符串后，再使用indexOf（）方法。
var location = ['1','2','3'];
var serverData = [‘1’ , ’4’, ‘5’];
for( var i = 0; i < serverData.length; i++ )
{
if(location.join().indexOf( serverData[i].location ) == -1 )
location.push( serverData[i]);
}
方法二（推荐方法）：
添加如下js代码：
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
当浏览器对于数组不支持indexOf()方法时，就为数组添加该方法。
该方法会在浏览器不支持数组的indexOf方法时，为其手动添加indexOf方法，实现浏览器的兼容。
网友评论