浏览器兼容性问题以及解决方法2

最新推荐文章于 2019-06-11 14:18:22 发布

Wendy-lxq

最新推荐文章于 2019-06-11 14:18:22 发布

阅读量744

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端面试文章标签：兼容性问题 css3 浏览器兼容性

本文链接：https://blog.youkuaiyun.com/u010297791/article/details/54974246

前端面试专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了IE6浏览器中常见的布局与样式兼容性问题，并提供了相应的解决方法，包括双边距、浮动间隙、注释干扰等典型问题。

1、IE6 双边距的问题

这个的意思是，如果我将一个div使用float的情况下，不管是向左还是向右都会出现双倍的间距，我举一个最简单的例子说明一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #ff89d9;
            margin-left: 50px;
            float: left;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

看到这个代码，可以很清楚的看到，这个效果应该是下面的:

但是在IE6的情况下，效果是这样的：

也就是在IE6中，左边的间距变成了100px，那要如何解决这个问题呢？给浮动元素加上display:inline。

修改的代码：

        .box{
            width: 200px;
            height: 200px;
            background-color: #ff89d9;
            margin-left: 50px;
            float: left;
            display: inline;
        }

这样效果就达到了：

2、li里元素都浮动，li在IE6 7下方会产生4px间隙问题

先举一个例子说明下这个问题：

html结构：

<ul class="list">
    <li>
        <a href="">左边</a>
        <span>右边</span>
    </li>
    <li>
        <a href="">左边</a>
        <span>右边</span>
    </li>
    <li>
        <a href="">左边</a>
        <span>右边</span>
    </li>
    <li>
        <a href="">左边</a>
        <span>右边</span>
    </li>
</ul>

css样式：

      .list{
            margin:0;
            padding:0;
            list-style:none;
            width:300px;
        }
        .list li{
            height:30px;
            border:1px solid red;
            line-height:30px;
        }
        .list li a{
            float: left;
        }
        .list li span{
            float: right;
        }

在Chrome下的显示效果是：

在IE6下的显示效果是：

很明显的可以看到，li之间增加 vertical-align: top;了4px的间隙，要解决这个问题，可以采用 vertical-align: top;这个属性，因为只是针对IE6 7，所以可以写成 *vertical-align: top;。

3、浮动元素之间添加了注释，导致多复制了文字问题

同样地，为了描述这个问题，我先抛砖引玉一下：

html结构如下：

<div class="wrap">
    <div class="left"></div>
    <span></span><!-- IE下文字溢出BUG -->
    <div class="right">↓这是多出来的一只猪</div>
</div>

css样式如下：

        .wrap{
            width: 400px;
        }
        .left{
            float: left;
        }
        .right{
            width: 400px;
            float: right;
        }

从代码上看好像没什么问题，就是显示一句话，在普通的浏览器下显示确实没问题，但是呢，在IE6下惊人的结果如下：

后面怎么多了几个文字！这个就是因为“两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px”导致这个问题的出现，解决方法如下：

1）两个浮动元素中间避免出现内联元素或者注释
2）与父级宽度相差3px或以上

现在我修改一下代码，将子元素的宽度改为相差3px的宽度，修改如下：

       .right{
            width: 397px;
            float: right;
        }

效果就是正常的了：

4、IE6 7父级元素的overflow:hidden;包不住子级的relative

为了实现这个效果，我们首先需要创建一个含有父级和子级的结构：

<div class="box">
    <div class="content"></div>
</div>

然后呢，编写一些样式：

        .box{
            width: 100px;
            height: 100px;
            border: 2px solid #ff89d9;
            background-color: #000000;
            overflow: hidden;
        }
        .content{
            width:400px;
            height: 400px;
            background-color: #64b0ff;
            position: relative;
        }

在Chrome下效果如下，没有问题：

在IE6下的效果如下，父级没有包住子级：

那如何解决这个问题呢？针对IE6 7给父级元素也添加相对定位，修改代码如下：

        .box{
            width: 100px;
            height: 100px;
            border: 2px solid #ff89d9;
            background-color: #000000;
            overflow: hidden;
            position: relative;
        }

这样就没问题了。

5、IE6下绝对定位元素父级宽高是奇数，绝对定位元素的right和bottom值会有1px的偏差

为了实现这个效果，我们首先需要创建一个含有父级和子级的结构：

<div class="box">
    <div class="content"></div>
</div>

然后呢，编写一些样式，父级宽高是奇数：

.box{
    width: 201px;
    height: 201px;
    background-color: #66d3ff;
    position: absolute;
}
.content{
    width: 100px;
    height:100px;
    background-color: #faa542;
    position: absolute;
    right: 0;
    bottom:0;
}

在Chrome下效果如下，没有问题：

在IE6下的效果如下，right和bottom有1px的偏差：

解决方法：避免父级宽高出现奇数。

6、IE6下绝对定位元素和浮动元素并列，绝对定位元素消失

为了模仿这种效果，我写了如下的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #66d3ff;
            border: 1px solid #000;
            position: relative;
        }
        .item{
            width: 150px;
            height: 150px;
            background-color: #ff89d9;
            float: left;
            margin-left:50px;
            *display: inline;
        }
        .box span{
            width: 50px;
            height: 50px;
            background-color: #ffcb38;
            position: absolute;
            top:-10px;
            right: -10px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item"></div>
    <span></span>
</div>
</body>
</html>

div和span并列，而且div是浮动元素，span是绝对定位元素。

在Chrome下的效果是：

在IE6 下的效果是：

在IE6 下绝对定位的元素span消失了，既然出现这个问题的原因是因为绝对定位元素和浮动元素并列，那么解决方法就是不要让这样的两个元素并列，处于同级关系就可以，修改代码如下：

<div class="box">
    <div class="item"></div>
    <p>
        <span></span>
    </p>
</div>

7、IE6 下input间隙问题

既然是input出现间隙问题，那就直接写一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            background-color: #ff2834;
            border: 1px solid #000000;
        }
        .box input{
            width: 200px;
            height: 30px;
            border:0;
            margin:0;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="box">
    <input type="text">
</div>
</body>
</html>

在Chrome下的效果是：

在IE6 下的效果是：

从上面的效果图中可以很明显的看到，上下都多了一条间隙，而且是div的的背景颜色，那么要如何解决这个小bug呢？给input增加一个float:left;就可以。

8、IE6 下输入类型表单控件背景问题

设计代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{
            height: 30px;
            background: url(images/email.png) no-repeat;
        }
    </style>
</head>
<body>
    <input type="text"/>
</body>
</html>

在Chrome下的效果是：

在IE6 下的效果是：

在IE6下，当文字输入超出框的时候，背景图片会被移动，解决这个问题的方法：给背景架一个fixed属性，将背景固定就可以，修改代码如下：

input{
     height: 30px;
     text-indent: 30px;
      background: url(images/email.png) no-repeat fixed;
}

修改完的效果：