IE8
本文针对IE8兼容性调整，对于Chorm/FF/opera 均采用增加前缀处理，不详细讨论
- CSS3
- html5
- 文档模式
一、CSS3 兼容性
支持 CSS3 的浏览器 : IE9+ / Chrome / Safari / Firefox / Opera
模块
- 边框
- 背景
- 文本效果
- 2D/3D转换
- 动画
- 布局
边框
- border-radius
- box-shadow
- border-image
背景
- background-size
- background-origin
文本效果
- text-shadow
- word-wrap
字体
- @font-face
2D/3D 转换
- transform 下 2D转换
- translate()
- rotate()
- scale()
- skew()
- matrix()
- transform 下 3D转换
- rotateX()
- rotateY()
动画
- transition 过渡动画
- @keyframes 兼容性 IE10+
- animation
布局
- column-count
- column-gap
- column-rule
解决方案
官方文档给出了2种使用方式，一种是引入.htc文件，另一种则是使用PIE.js。如果使用第一种方法，则需要书写的CSS3样式下写：behavior: url(pie.htc)，且该文件必须放在跟目录下，因为htc是从跟目录下开始遍历。由于某种原因，您无法修改服务器配置（例如公用主机，或是空间服务商提供的服务器），您可以用一个PHP文件来间接调用htc文件。通过PHP文件来增加一个含有“text/x-component”字样的Content-type头，同时调用pie.htc文件。需要将pie.php和pie.htc放在同一个文件夹目录下。
<?php header( 'Content-type: text/x-component' ); include( 'pie.htc' ); ?>
如果你是通过nginx来托管此文件，只要在Nginx的配置文件中加入一条MIME规则即可。我建议使用Flask来托管它（放在static文件夹中），这样更方便，然后只需加入下面的代码：
import mimetypes mimetypes.add_type('text/x-component', '.htc')
二、HTML5 兼容性
支持HTML5 浏览器：IE9+（IE9部分支持）/ Chrome / Safari / Firefox / Opera
HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
详细标签：http://www.w3school.com.cn/tags/index.asp
让低端浏览器兼容HTML5 标签
1.添加JS代码
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', '); var i= e.length; while (i--){ document.createElement(e[i]) }
<style> article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{ display: block; } </style>
2.添加插件
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
3. html5shiv
一些细节：
- 关于max-width
- 嵌套inline-block下padding元素重叠
- placeholder
- last-child
- background-size: cover
- filter blur
三、文档模式
1.IE的兼容性视图
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> // 调用IE最新版本文档模式
IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame（可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Chrome浏览器内核），那么就用Chrome内核来渲染。
国内的浏览器通常是通过访问 meta标签来确定如何渲染。以下是360浏览器的官网说明：
“由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例，我们优先通过Webkit内核渲染主流的网站，只有小量的网站通过IE内核渲染，以保证页面兼容。在过去很长一段时间里，我们主要的控制手段是一个几百k大小网址库，一个通过长期人工运营收集的网址库。
尽管我们努力通过用户反馈、代码标签智能判断技术提高浏览器的自动切核准确率。但是在很多情况下，我们仍然无法达到百份百正确。因此，我们新增加了一个控制手段：内核控制Meta标签。只要你在自己的网站里增加一个Meta标签，告诉360浏览器这个网址应该用哪个内核渲染，那么360浏览器就会在读取到这个标签后，立即切换对应的内核。并将这个行为应用于这个二级域名下所有网址。”
解决方案
<meta name="renderer" content="webkit">
2.声明DOCTYPE，浏览器会确认是HTML 还是XHTML
会影响：
- 标签、attributes、properties等影响
- 影响各种渲染模式(标准模式、混杂模式)的解释影响
目前最佳
<!DOCTYPE html>
四、其他
IE8
- 不支持 input[type=text] 这种写法
- 媒体查询 media Query (解决方案：使用Respond.js)
- 有一个地方需要注意的是，如果对Bootstrap3 media query声明的属性（比如
.container）进行覆盖，那在不支持media query的浏览器中Respond.js起作用后，会把你的覆盖样式再次覆盖。我的解决方案是在后面加上!important。
- 有一个地方需要注意的是，如果对Bootstrap3 media query声明的属性（比如
CSS3兼容
1. 针对非IE浏览器，兼容CSS3的前缀
-webkit- chrome 兼容 -moz- 火狐(FF) 兼容 -o- 欧朋(opera) 兼容 -ms- IE9 兼容
2. IE9一下，兼容CSS3，用PIE.htc
min-height 和 min-width 兼容
IE6下
min-height 失效，但是height 可以作为自动填充的功能，所以用HACK（_height: /*IE6 */）达到预期效果
其他IE低端浏览器兼容
inline-block 兼容
IE6 IE7下兼容，具有layout 特性，但是不具有行内特性
display: inline-block;
*display: inline;
*display: inline;
*zoom:1;
IE7以下没有inline-block属性，为了触发haslayout属性，zoom：1可以触发haslayout：true，在通过设置display:inline具有行内特性
盒模型兼容
有DOCTYPE声明，浏览器使用标准模式(Standars mode，也叫Strict mode)，没有声明的DOCTYPE浏览器使用怪异模式（Quirks mode）
IE下
非IE下
position:fixed 兼容
IE6不兼容
_position: absolute;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
fixed抖动
*html{
background-image:url(about:blank);
background-image:url(about:blank);
background-attachment: fixed;
}
外边距 margin
1. margin 没有继承性
2. IE6 下的双边距问题
原因：产生的条件是：block元素+浮动+margin。
解决办法：inline
3. 上下边距重叠
现象：
- 常规文档流中，当上下两个存在margin时，取最大的；当存在负值时，则用最大的减去负值的绝对值。
- 浮动中，上下两元素margin不重合
行内对齐
图标与行内文字大小不一致时，希望居中对齐。
vertical-align:text-bottom;
浮动相关
1. 浮动与图片
浮动li 包含图片则有图片不随着浮动排列，而是以实体的形式依然布局。
2. 高度塌陷
解决方法：
- <div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿
- .fix{overflow:hidden; zoom:1;} ，但是注意，有相关定位如position，margin负值时，会产生影响
- .fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;} 推荐使用
浮动相关资料：
CSS float浮动的深入研究、详解及拓展(二) ：http://www.zhangxinxu.com/wordpress/?p=594
HACK
特殊标签 !important
CSS Hack
Chrome FF IE7+下
!important > 正常
IE6
*html > !important = 正常 = *
条件注释法
只在IE下生效 <!--[if IE]>...<![endif]--> 只在IE9下生效<!-- [if IE 9]>...<![endif]--> 在IE9以下（包括IE9）<!-- [if lt IE 9]> ... <![endif]--> 在IE6以上（包括IE6）<!--[if gte IE 6]>... <![endif]--> 非IE浏览器<!--[if !IE]>... <![endif]-->
技巧：越早期的hack越往前放。
<!--[if it IE7 ]><html class="ie6"><![end if]>
添加前缀前缀
使用 *+html 文档必须使用标准模式( 声明DOCTYPE )
* html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE7 */
例如：
.a{ color: red; _color: #ccc; // IE6 *color: blue; // IE6 IE7 #color: red; // IE6 IE7 font-weight: bold !important; // 除了IE6 ，优先级最高 }
IE6 调用!important 时，必须单独使用样式
.a{font-weight: bold !important} // 有效
.a{font-weight: normal; }
IE6 会显示bold
全兼容 渐变效果 头颜色#F3A8A8 尾颜色#e23b2e
background: #E4E4E5; /* Old browsers */ background: -ms-linear-gradient(top,#f2f2f2,#d5d6d8); background: -moz-linear-gradient(top,#f2f2f2,#d5d6d8); ;/*FF 3.6+ */ background: -webkit-gradient(linear,0 0,0 100%,from(#f2f2f2),to(#d5d6d8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,#f2f2f2,#d5d6d8); background: -o-linear-gradient(top,#f2f2f2,#d5d6d8); -pie-background: linear-gradient(top,#f2f2f2,#d5d6d8);
filter:alpha(opacity=100 finishopacity=100 style=1 startX=startX，startY=startY，finishX=finishX，finishY=finishY)
progid:DXImageTransform.Microsoft.gradient( startColorstr='#F3A8A8', endColorstr='#e23b2e',GradientType=1 ); /* IE6-9 */
background: -ms-linear-gradient(top, #F3A8A8 0%,#e23b2e 100%); /* IE10+ 0%表示从头开始 100% 表示结束*/