IE8的一些兼容问题_ie8 不识别background: none-优快云博客

本文链接：https://blog.youkuaiyun.com/u010200033/article/details/80272201

本文介绍了一系列针对IE8浏览器的CSS3兼容性解决方案，包括使用css3pie.htc支持部分CSS3特性、利用html5shiv实现H5标签支持、通过特定样式规则解决max-width及display:inline-block等问题，并提供了背景图片尺寸调整等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1）对部分css3的支持 =》方法使用插件 css3pie.htc

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .box{
                position:relative;
                z-index: 2;
                width: 200px;height: 200px;
                border:2px solid #ccc;
                border-radius: 50%;
                behavior: url(./css/PIE.htc); 

            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

2）让ie8支持媒体查询使用 response.js 处理这个问题

3）识别h5标签使用 html5shiv

---------------------------------样式分界线-------------------------------------------

1) max-width 问题

2）placeholder不支持

解决方法引入jquery.placeholder.js去解决

3）兼容 display:inline-block的方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            ul li{
                list-style: none;
                display: inline-block;
                *display:inline;
                *zoom:1; 
                padding: 5px 10px;
                border:1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>笑嘻嘻</li>
            <li>笑嘻嘻</li>
            <li>笑嘻嘻</li>
        </ul>
    </body>
</html>

4）不支持last-child 解决方案给最后元素加类名

5）background-size ie8不支持解决方案：滤镜

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .box{
                width: 500px;height: 500px;border:3px solid #ccc;
                background: url("images/bb1.jpg") no-repeat;
                background-size: cover;
                /*background: none\9;*/
                /*下一行为关键设置*/
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bb1.jpg', sizingMethod='scale');
            }
        </style>
    </head>
    <body>
       <div class="box">
           
       </div>
    </body>
</html>

---------------js兼容------------------------------------------------

es6用babel解析

无法使用forEach string.trim 自己写一个方法