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');是针对元素小范围的模糊效果。