什么是浏览器兼容性问题？列举IE常见的兼容性问题？

兼容性问题就是相同代码在不同浏览器上行为不一致。

主要的IE兼容性问题都是IE6引起的，但是现在基本要求都是兼容IE8+

IE常见兼容性问题列举：

　　IE6的双边距bug：实际展示出来的margin是200px

　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
            }
            
            #div1 {
                background-color: #f00;
                float: left;
                margin: 100px;
　　　　/*解决方案*/
                _display: inline;
            }
        </style>
    </head>
    <body>
        <!-- IE6的双边距Bug -->
        <div id="div1">
            
        </div>
    </body>
</html>

 

　　IE6~8不支持opacity

　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
            }
            
            #div2 {
                background-color: #000;
                opacity: 0.4;
                float: left;
                /* IE8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
            }
        </style>
    </head>
    <body>
        
        <!-- IE 6~8 不支持opacity -->
        <div id="div2">
            
        </div>
    </body>
</html>

　　IE6的z-index失效问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            div {
                width: 300px;
                height: 300px;
            }
            
            #div3 {
                background-color: #f00;
                position: relative;
　　　　/*给#div4的父级增加z-index: 1;因为在IE6以及IE7中是父级与父级进行比较z-index的大小，无论子级的z-index有多大，均不生效*/
                z-index: 1;
            }
            
            #div4 {
                width: 100px;
                background-color: #ff0;
                position: absolute;
                top: 150px;
                left: 100px;
                z-index: 5;
            }
            #div5 {
                background-color: #000;
                position: absolute;
            }
            
        </style>
    </head>
    <body>
        <!-- IE6\7的 z-index失效问题 -->
        <div id="div3">
            <div id="div4"></div>
        </div>
        <div id="div5">
            
        </div>
    </body>
</html>
posted @ 2021-04-16 22:55  #Friday  阅读(556)  评论(0)    收藏  举报