Doctype
<!DOCTYPE html>
Meta
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 针对360 -->
<meta name="renderer" content="webkit">
媒体查询支持
CSS3 支持
CSS3 PIE，它支持的特性有这些：border-radius box-shadow border-image multiple background images linear-gradient等。注意阅读 Knows Issues
HTML5 支持
CSS 兼容性
max-width
IE解析max-width所遵循的规则：严格要求直接父元素的宽度是固定的
-
td中的max-width
如果针对td中的img元素设置max-width: 100%，在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为100%却无效，后来才发现 需要再对a标签设置width: 100%，这样才能使最内层的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
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设置为scale就OK了。
如果你在此背景之上放置了链接，那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加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');是针对元素小范围的模糊效果。
网友评论