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

来源：互联网发布：电子导游软件编辑：程序博客网时间：2024/05/17 23:17

兼容问题目录

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>

0 0