Doctype
　　<!DOCTYPE html>
　　Meta
　　<meta http-equiv="X-UA-Compatible" content="IE=edge，chrome=1">
　　<!-- 针对360 -->
　　<meta name="renderer" content="webkit">
　　媒体查询支持
　　Respond.js
　　CSS3 支持
　　CSS3 PIE，它支持的特性有这些：border-radius box-shadow border-image multiple background images linear-gradient等。注意阅读 Knows Issues
　　HTML5 支持
　　html5shiv
　　CSS 兼容性
　　max-width
　　IE解析max-width所遵循的规则：严格要求直接父元素的宽度是固定的
　　td中的max-width
　　如果针对td中的img元素设置max-width: ，在IE和Firefox你会发现不奏效，而在Chrome中却是可以的。经查询发现需要给table设置table-layout: fixed。
　　嵌套标签中的max-width
　　<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为却无效，后来才发现 需要再对a标签设置width: ，这样才能使内层的img标签充满整个div。
　　嵌套inline-block下padding元素重叠
　　IE8出现重叠， 解决方法: float: left替代display: inline-block实现水平布局。
　　<ul>
　　<li><a>1</a></li>
　　<li><a>2</a></li>
　　<li><a>3</a></li>
　　</ul>
　　ul li{
　　display: inline-block;
　　}
　　ul li a{
　　display: inline-block;
　　padding: 10px 15px;
　　}
　　placeholder
　　jquery-placeholder
　　last-child
　　后一个元素， 单独设置一个.last的class
　　background-size: cover
　　如果你想使用background-size: cover设置全屏背景，很遗憾IE8办不到...但可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式：
　　filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled， sizingMethod=Size ， src=URL)
　　将sizingMethod设置为scaleOK了。
　　如果你在此背景之上放置了链接，那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加position:relative使其相对浮动。
　　filter blur
　　CSS3中提供支持滤镜效果的属性filter，比如支持高斯模糊效果的blur
　　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的元素都不会生效。
　　IE9对filter: blur(10px)无效，而对filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');是针对元素小范围的模糊效果。