WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理--03

兼容问题目录

16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的
17、IE6下同一层级的浮动元素会盖住绝对定位元素
18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差
19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉
20、IE67下输入类型的表单控件，上下两边各有1px的间隙
21、IE8以及IE8之前不识别H5标签
22、IE6不支持png透明图片

后续兼容性问题处理链接地址

http://blog.csdn.net/baidu_37107022/article/details/71972223

http://blog.csdn.net/baidu_37107022/article/details/71973570

16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的

解决办法
给父级也加相对定位

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                width: 200px;
                height: 200px;
                border: 5px solid #f00;
                overflow: hidden;
                position: relative;
            }
            #box div{
                width: 300px;
                height: 300px;
                background: green;
                position: relative;
            }
        </style>
    </head>
    <body>
        <!--
            IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的
            解决办法
                给父级也加相对定位
        -->
        <div id="box">
            <div></div>
        </div>
    </body>
</html>

17、IE6下同一层级的浮动元素会盖住绝对定位元素

解决办法
给定位元素外面嵌套一个层

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 200px;
                height: 200px;
                border: 5px solid #f00;
                position: relative;
            }
            .box div{
                width: 150px;
                height: 150px;
                background: green;
                float: left;
                display: inline;
                margin-left: 50px;
            }
            span{
                width: 100px;
                height: 100px;
                background: yellow;
                position: absolute;
                right: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <!--
            IE6下同一层级的浮动元素会盖住绝对定位元素
            解决办法
                给定位元素外面嵌套一个层
        -->
        <div class="box">
            <div></div>
            <!--<span>kaivon</span>-->
            <p><span>kaivon</span></p>
        </div>
    </body>
</html>

18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差

无法解决

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 200px;
                height: 200px;
                border: 10px solid #f00;
                position: relative;
            }
            .box div{
                width: 50px;
                height: 50px;
                background: green;
                position: absolute;
                right: -10px;
                bottom: -10px;
                /*left: -10px;
                top: -10px;*/
            }
        </style>
    </head>
    <body>
        <!--
            在IE6下，定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差
        -->
        <div class="box">
            <div></div>
        </div>
    </body>
</html>

19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉

解决方法
给元素添加相对定位，或者给父级overflow:hidden;

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 200px;
                height: 200px;
                border: 1px solid #f00;
            }
            .box div{
                width: 100px;
                height: 100px;
                background: green;
                margin: -10px 0 0 -10px;
            }
        </style>
    </head>
    <body>
        <!--
            IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉
            解决方法
                给元素添加相对定位，或者给父级overflow:hidden;
        -->
        <div class="box">
            <div></div>
        </div>
    </body>
</html>

20、IE67下输入类型的表单控件，上下两边各有1px的间隙

解决办法
给控件加浮动

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                border: 1px solid #f00;
                overflow: hidden;
                zoom: 1;
            }
            div input{
                float: left;
            }
        </style>
    </head>
    <body>
        <!--
            IE67下输入类型的表单控件，上下两边各有1px的间隙
            解决办法
                给控件加浮动
        -->
        <div>
            <input type="text" />
        </div>
    </body>
</html>

21、IE8以及IE8之前不识别H5标签

无法解决

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            document.createElement('header');
            document.createElement('nav');
        </script>
        <script src="js/html5shiv.min.js"></script>
        <style>
            header{
                width: 100px;
                height: 100px;
                background: red;
                /*display: block;*/
            }
            nav{
                width: 200px;
                height: 200px;
                background: green;
            }
        </style>
    </head>
    <body>
        <!--
            IE8以及IE8之前不识别H5标签

        -->
        <header>头部</header>
        <nav>导航</nav>
    </body>
</html>

22、IE6不支持png透明图片

使用插件
这里写图片描述

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/DD_belatedPNG_0.0.8a.js"></script>
        <script>
            DD_belatedPNG.fix('img,div');
        </script>
        <style>
            body{
                background: #ccc;
            }
            div{
                width: 300px;
                height: 300px;
                background:url(img/1.png);
            }
        </style>
    </head>
    <body>
        <!--
            IE6不支持png-24透明图片
        -->
        <img src="img/1.png"/>
        <div></div>
    </body>
</html>

导入插件处理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/DD_belatedPNG_0.0.8a.js"></script>
        <script>
            DD_belatedPNG.fix('body');
            /*
             * 这个插件不支持body的背景
             */
        </script>
        <style>
        /*
         * 用滤镜的话就必需给body高度
         */
            body{
                height: 500px;
                background: #ccc url(img/1.png) no-repeat;
                _background-image:none;
                filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/1.png", sizingMethod="crop");
            }

        </style>
    </head>
    <body>
    </body>
</html>
posted @   TCB_Java  阅读(311)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示