欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

WEB前端:浏览器(IE+Chrome+Firefox)常见兼容问题处理--01

程序员文章站 2022-07-01 12:51:38
...

兼容问题目录

1、IE6下怪异盒模型
2、IE6下最小高度问题
3、IE6下不支持1px的点线
4、IE6下内容会把父级的高度撑开
5、IE6下只支持给a标签添加伪类
6、IE67下不支持给块标签加display:inline-block
7、IE8以及IE8以前的浏览器都不支持opacity

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

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

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


1、IE6下怪异盒模型

在标准模式下的盒模型,

盒子总宽度/高度=width/height+padding+border+margin

在怪异模式下的盒模型,

盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,

盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

解决办法
在css3中有一个属性box-sizing来处理是用何种模型进行解析。

box-sizing有两个值一个是content-box,另一个是border-box

当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;

当设置为box-sizing:border-box时,将采用怪异模式解析计算;

目前使用此属性需要前缀如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

代码演示


<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                border: 10px solid #000;
                padding: 10px;
                background: red;
            }
        </style>
    </head>
    <body>
        <!--
            标准盒模型
                总宽度=width+padding+border
            怪异盒模型
                总宽度=width

        注意此时是没有<!DOCTYPE html>声明的       
        -->
        <div>123</div>
    </body>
</html>

什么是盒模型链接:http://blog.csdn.net/baidu_37107022/article/details/71272900

2、IE6下最小高度问题

解决办法
1、overflow:hidden 推荐
2、font-size: 0;

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 1px;
                background: red;
                /*font-size: 0;*/
            }
        </style>
    </head>
    <body>
        <!--
            IE6下块元素高度小于19px,会被当做19px来处理
            解决办法
                1、overflow:hidden           推荐
                2、font-size: 0; 
        -->
        <div></div>
    </body>
</html>

3、IE6下不支持1px的点线

解决办法:
IE6不支持一像素的点划线,用背景图代替

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 500px;
                height: 100px;
                border: 1px dotted #f00;
            }
        </style>
    </head>
    <body>
        <!--
            IE6不支持一像素的点划线,用背景图代替
        -->
        <div></div>
    </body>
</html>

4、IE6下内容会把父级的高度撑开

解决办法
overflow: hidden;

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <!--
            IE6下内容会把父级的高度撑开
            解决办法
                overflow: hidden;
        -->
        <div>
            这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊
        </div>
    </body>
</html>

5、IE6下只支持给a标签添加伪类

IE6不支持除了a标签以外标签的伪类—无法解决

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a:hover{
                color: #f00;
            }
            div{
                width: 100px;
                height: 100px;
                background: red;
            }
            div:hover{
                background: green;
            }
        </style>
    </head>
    <body>
        <!--
            IE6不支持除了a标签以外标签的伪类
        -->
        <a href="#">kaivon</a>
        <div></div>
    </body>
</html>

6、IE67下不支持给块标签加display:inline-block

无法解决

**根本原因:**IE6、7不认识inline-block,给行内元素加上这个属性后会触发IE的haslayout特点,会让行内元素具有与inline-block一样的特征,所以它不支持块元素的inline-block。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            span,div{
                width: 100px;
                height: 100px;
                background: red;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <!--
            IE67不支持块元素display:inline-block
        -->
        <div>kaivon1</div>
        <div>kaivon2</div>
        <span>kaivon1</span>
        <span>kaivon2</span>
    </body>
</html>

普通浏览器中效果

WEB前端:浏览器(IE+Chrome+Firefox)常见兼容问题处理--01

IE7中效果

WEB前端:浏览器(IE+Chrome+Firefox)常见兼容问题处理--01

7、IE8以及IE8以前的浏览器都不支持opacity

解决办法
用filter

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background: red;
                opacity: 0.5;
                filter:alpha(opacity=50);
            }
        </style>
    </head>
    <body>
        <!--
            IE8以及IE8以前的浏览器都不支持opacity
            解决办法
                用filter
        -->
        <div>kaivon</div>
    </body>
</html>