ie7兼容性问题解决方法汇总(不定期更新)

缘由

  最近在做公司的商城网站,之前网站的兼容要求都是兼容到ie8,这次也驾轻就熟解决了ie8的兼容的问题。按照往常,我交接完前端页面就ok了,但是这次问题马上就来了,那就是根据客户反馈在360浏览器上显示有问题。我们的国产浏览器一般都是双核浏览器,这也算是一种天朝特色了。网站在360浏览器极速模式(chrome)下肯定没有问题。但是在它在无法判断你的网站来源的时候,是一定几率切到兼容模式,在兼容模式,如果是在ie8的模式下也是没有问题的,但是他好死不死的的总会莫名其妙的切换到ie7文档模式下。

360浏览器-ie7模式

360安全浏览器-ie7模式

  查找了360浏览器的文档,官方文档指导开发者是设置一个meta标签,当360浏览器读到了这个标签的时候会自动切换到极速模式。

<meta name="renderer" content="webkit|ie-stand|ie-comp">

官方说明

此处输入图片的描述

360浏览器meta内核切换控制

我在head加入了这个meta标签,但是还是不起作用。还是会ie兼容模式浏览。
万般无奈下只有做ie7的兼容,下面记录我在做ie7兼容碰到的问题,不定期更新汇总。(最好不要更新,真的很不想做这种兼容。)

问题汇总

ie7的display:inline-block不起作用(css)

在IE6和IE7中这个版本的IE流量器中,对display:inline-block属性支持不佳,这也是一个经典的BUG。
解决办法就是用css hack先让块元素变为内联,再使用(zoom:1 或float属性等)触发块元素layout.(*为ie67专用的csshack)

.xxx{
    display:inline-block;
    *display:inline;
    *zoom:1;
}

IE7中绝对定位元素之间的遮盖问题

在ie7中遇到一个问题就是两个同级的元素,boxA与boxB,设置了相对定位。
此处输入图片的描述
他们的子元素设置了绝对定位。并绝对居中在他的父元素中。

此处输入图片的描述

现在要做的是在hover在boxA的子元素的时候,让他悬浮在所有的div之上。就如下图所示一样。

此处输入图片的描述

这个很简单只要设置子元素的z-index:1000;值就行了。但是在ie7上表现就会让你吐血。下面就是ie7中真正的样子。

此处输入图片的描述

上网查找了一下资料,网上说这是他源于IE7的一个”bug”,原因是父元素相对定位, 其子元素设置绝对定位并设置较大的z-index值, 以期让其浮在最上层. 该元素的定位会向上找到第一个position属性非static的祖先元素, 但是, 其祖先元素后面的同辈元素若设置position非static, 且z-index为auto, 则其z轴高度会始终大于之前绝对定位的元素, 且无法被冲破..
大白话就是我们要让boxA的子元素覆盖在父辈的同辈元素上,就要给自己的父辈元素设置position:relative,并设置z-index的值。由于父辈的同辈元素boxB,那么其z-index不能设置auto,如果设置数值一定要比boxA设置的值要小。

例子代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE7中绝对定位元素之间的遮盖问题-例子</title>
    <style>
        #boxA {
            height: 120px;
            width: 360px;
            border: 3px solid red;
            position: relative;
            z-index: 1000;//一定要设置z-index
        }

        #boxA > div {
            height: 380px;
            width: 300px;
            background: yellow;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 1000;
        }

        #boxB {
            margin-top: 20px;
            height: 120px;
            width: 360px;
            border: 3px solid blue;
            position: relative;
            z-index: 999;//一定要设置z-index,并且要比boxA小
        }
        #boxB>div {
            height: 60px;
            width: 280px;
            background: green;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div id="boxA">boxA
    <div></div>
</div>
<div id="boxB">boxB
    <div></div>
</div>
</body>
</html>

解决IE6,IE7下子元素不随着父元素滚动条滚动而滚动的问题

在ie7中父元素设置了overflow属性,它的子元素很长,要显示滚动条,并且它(或者是子元素的后代元素其中一个设置了position:relative属性)设置了position:relative属性,那么就会出现一个问题,就是子元素不随着父元素滚动条滚动而滚动。解决办法就是给父元素设置position:relativel;

此处输入图片的描述

例子代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #scroll-wrap {
            width: 200px;
            height: 300px;
            border: 1px solid red;
            overflow: scroll;
            position: relative;//设置这个可解决内容滚动问题
        }
        #scroll-list {
            width: 200px;
            padding: 0;
            margin: 0;
        }
        #scroll-list >li {
            line-height: 30px;
            position: relative;
        }
    </style>
</head>
<body>
<div id="scroll-wrap">
    <ul id="scroll-list">
        <li>xxxxxxxxxxxxxxxxxxxx1</li>
        <li>xxxxxxxxxxxxxxxxxxxx2</li>
        <li>xxxxxxxxxxxxxxxxxxxx3</li>
        <li>xxxxxxxxxxxxxxxxxxxx4</li>
        <li>xxxxxxxxxxxxxxxxxxxx1</li>
        <li>xxxxxxxxxxxxxxxxxxxx2</li>
        <li>xxxxxxxxxxxxxxxxxxxx3</li>
        <li>xxxxxxxxxxxxxxxxxxxx4</li>
        <li>xxxxxxxxxxxxxxxxxxxx1</li>
        <li>xxxxxxxxxxxxxxxxxxxx2</li>
        <li>xxxxxxxxxxxxxxxxxxxx3</li>
        <li>xxxxxxxxxxxxxxxxxxxx4</li>
        <li>xxxxxxxxxxxxxxxxxxxx1</li>
        <li>xxxxxxxxxxxxxxxxxxxx2</li>
        <li>xxxxxxxxxxxxxxxxxxxx3</li>
        <li>xxxxxxxxxxxxxxxxxxxx4</li>
    </ul>
</div>
</body>
</html>

ie7缺少标识符号(js)

根据json的key取值
如下面这个json

{
"row":false
}

要取得json中的row的值
一般取值

var newJson = {
"row":false
};
newVal = newJson.row;

但是ie7会报缺少标识符的错误
ie7不会报错的标准写法是

newVal = newJson['row'];

20170215更新-360标签控制后记

之前的360浏览器一直不能切换成最高内核,按照官方的设置的meta的标签也根本不起作用,我觉得是因为这个360浏览器在使用ie内核浏览网页的时候就是直接调用本机的ie的,可以通过按F12打开开发者工具的时候发现。所以在知乎找到了一个解决办法为什么360浏览器兼容模式文档模式默认以ie7标准渲染?-知乎,用这个标签的时候,就能打开最高内核。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

这个设置其实我早早就发现了,但是在之前的实验下不成功,我现在发现过去的问题了。因为在有客户反映在页面在360浏览器下有问题,而我调试的时候,是在控制台上硬切换成ie7模式的。下面是一段html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        .xxxx{
            display: inline-block;
            width: 200px;
            height: 200px;
            background: red;
        }
        .xxxx + .xxxx{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="xxxx"></div>
    <div class="xxxx"></div>
</body>
</html>

这是ie8下面的截图效果
此处输入图片的描述

在控制台调整到ie7模式

此处输入图片的描述

就会发生下面这种现象

此处输入图片的描述

当我这时候关闭了开发者工具的时候,重新刷新页面还是在ie7模式渲染的。这时候我就以为是这个meta标签不起作用。其实是浏览器记住了设置的渲染模式,这个标签控制不起作用了。当关闭浏览器重新打开的时候,其实它就会让这个标签控制生效。如果在ie内核下切换到最高模式渲染。就是这一点坑坏了我,毕竟客户不会自己主动去切换成ie7模式。其实这个代码已经能成功的让ie内核在最高版本下渲染了。

参考链接

360浏览器内核控制Meta标签说明文档
解决IE6,IE7下子元素不随着父元素滚动条滚动而滚动的问题
ie6和ie7下z-index bug的解决办法
IE7中绝对定位元素之间的遮盖问题示例探讨
IE7 绝对定位z-index 层级问题

comments powered by Disqus