IE8 兼容性处理

2023年6月25日 174次阅读 来源: KeKeMars

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: 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

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

参考

    原文作者：KeKeMars
    原文地址: https://www.jianshu.com/p/60fab1d97340
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞