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

最新推荐文章于 2024-08-13 14:38:53 发布

Wendy-lxq

最新推荐文章于 2024-08-13 14:38:53 发布

阅读量7.2k

点赞数 1

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

本文链接：https://blog.csdn.net/u010297791/article/details/54970206

版权

前端面试专栏收录该内容

8 篇文章 5 订阅

订阅专栏

前端工程师在开发的过程中，遇到最头疼的莫过于是浏览器的兼容性问题，常常为了实现一个兼容各种浏览器的效果绞尽脑汁。我们平时在写前端代码的时候，在排版时也是会遇到各种兼容性问题，尤其是老板要求要兼容IE5、IE6、IE7的时候。接下来我总结几个我遇到的兼容性问题以及解决方法，后续遇到会慢慢更新。

1、H5标签兼容 IE5、IE6不兼容

H5标签在IE5、IE6不兼容下不兼容。为了说明这个问题，我先写一个小小的例子，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5</title>
    <style>
        header{
            width:200px;
            height:200px;
            display: block;
            background-color: #34b1ff;
        }
        section{
            width:150px;
            height:150px;
            background-color: #ff54c5;
        }
        footer{
            width:100px;
            height: 100px;
            background-color: #73ff58;
        }
    </style>
</head>
<body>
    <header>header</header>
    <section>session</section>
    <footer>footer</footer>
</body>
</html>

在Chrome的浏览器下：

因为我电脑上没有IE6，所以我用IETester进行测试，在IE6下的显示结果：

为了解决这个问题，我们可以手动创建H5标签，但是如果所有H5标签都需要这样一个一个去创建的话，过程很麻烦，不过这里先写一下具体是怎么创建的。Js代码如下：

    <script>
        document.createElement("header");
        document.createElement("section");
        document.createElement("footer");
    </script>

显示结果：

发现这三个元素没有按照我定义的宽高进行显示，这是为什么呢？这是因为通过js创建的元素被认为是自定义标签，默认是内联元素，而如果想按照固定的宽高进行显示的话，必须是块元素，所以为了实现这个效果，我们可以给每个元素的样式中添加display:block。这样效果就达到了。样式代码修改如下：

        header{
            width:200px;
            height:200px;
            display: block;
            background-color: #34b1ff;
        }
        section{
            width:150px;
            height:150px;
            display: block;
            background-color: #ff54c5;
        }
        footer{
            width:100px;
            height: 100px;
            display: block;
            background-color: #73ff58;
        }

这里有一个问题是，如果我们需要非常非常多的标签，每个元素都要自己一个一个创建就非常麻烦，那么我们可以通过引入一个H5 JS插件来实现。这里我采用了html5shiv.js，因为无法上传，需要的话可以私下找我要。实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5</title>
    <script src="js/html5shiv.js"></script>
    <style>
        header{
            width:200px;
            height:200px;
            background-color: #34b1ff;
        }
        section{
            width:150px;
            height:150px;
            background-color: #ff54c5;
        }
        footer{
            width:100px;
            height: 100px;
            background-color: #73ff58;
        }
    </style>
</head>
<body>
    <header>header</header>
    <section>session</section>
    <footer>footer</footer>
</body>
</html>

2、元素浮动之后，能设置宽度的话就给元素设置宽度；如果需要宽度是内容撑开的，就给它里边的块元素加上浮动

这个什么意思呢？我们来举个例子说明，我先写一个html的结构和想要达到的效果，我们现在写了下面的结构，想要实现的效果就是两个div分别显示在左右两边：

<div class="box">
    <div class="left">
        <h2>左边</h2>
    </div>
    <div class="right">
        <h2>右边</h2>
    </div>
</div>

样式代码：

        .box{
            width:400px;
            border:1px solid #00A2E9;
            overflow: hidden;
        }
        .left{
            background-color: yellow;
            float: left;
        }
        .right{
            background-color: red;
            float: right;
        }
        h2{
            margin: 0;
            height: 30px;
        }

在Chrome下的效果是：

但是看到IE6下的效果，我傻了，我不是都设置了左右浮动了吗，为什么结果是这样的！

接下来说一下解决方法：

1）给元素设置宽度

修改h2的代码如下：

        h2{
            margin: 0;
            height: 30px;
            width: 100px;
        }

在IE6下的结果现在达到了：

2）如果需要宽度是内容撑开的，就给它里边的块元素加上浮动

现在问题来了，有时候我不知道里面的h2到底要多宽，我需要根据内容进行撑开，所以就不能设置统一的width，此时，可以通过给h2这个块元素加上浮动。

修改代码如下：

        h2{
            margin: 0;
            height: 30px;
            float: left;
        }

在IE6下的效果完成了：

3、第一块元素浮动，第二块元素加上margin值等于第一块元素的宽度，在IE6下会有间隙问题

首先还是抛砖引玉举一个例子：

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

样式：

        body{
            margin: 0;
        }
        .box{
            width: 500px;
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: #ff89d9;
            float: left;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: #34b1ff;
            margin-left: 200px;
        }

在IE6下的效果：

怎么在两个div中间多了一条间隙！大家都会很好奇这是为什么，原因其实我也不知道，因为我在前面已经增加了一句margin:0。但是效果还是会有这样的一条间隙。因为第一个div是浮动的，脱离了文档流，而第二个div仍然在文档流中，让两个排在同一行，确实是出现我们想不到的问题，一般不建议这么写，如果真的要这么写的话，那么我们就给第二个元素也增加浮动。

修改的代码：

        .right{
            width: 200px;
            height: 200px;
            background-color: #34b1ff;
           /* margin-left: 200px;*/
            float: left;
        }

大家对比一下，原来我是想要通过设置margin-left来让第二个div自动往右移动。现在我是将这条代码去掉，直接加上了浮动。效果如下（完美地去掉了那条间隙）：

4、IE6下子元素超出父级宽高，会把父级的宽高撑开

首先还是抛砖引玉举一个例子：

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

样式代码：

        .box{
            width: 100px;
            height:100px;
            background-color: #34b1ff;
            border: 2px solid #ff2834;
        }
        .content{
            width: 200px;
            height: 200px;
            background-color: #73ff58;
        }

在Chrome下的效果是：

在IE6下的效果：