html中padding在ie8兼容性,IE8 兼容性处理

Doctype

Meta

媒体查询支持

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

最外层元素.work-item设置了固定宽度，但是对img设置max-width为100%却无效，后来才发现 需要再对a标签设置width: 100%，这样才能使最内层的img标签充满整个div。

嵌套inline-block下padding元素重叠

IE8出现重叠, 解决方法: float: left替代display: inline-block实现水平布局。

• 1
• 2
• 3

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

参考