IE7兼容问题及解决方案
2018-07-22 本文已影响0人
古古怪吧
一、IE7下margin-top失效
例子：
HTML代码：
<body>
<div class="header"></div>
<div class="test-box-1"></div>
<div class="test-box-2"></div>
</body>
CSS代码：
<style>
.header {
position: relative;
width: 100%;
height: 60px;
background: red;
}
.test-box-1 {
position: fixed;
top: 50%;
width: 100%;
height: 100px;
background: green;
}
.test-box-2 {
position: relative;
width: 100%;
height: 100px;
background: blue;
margin-top: 60px;
}
</style>
效果：
IE7下margin-top失效
可以看到，test-box-2的margin-top不生效。原因是test-box-2跟在了绝对定位元素test-box-1的后面，导致margin-top失效。
解决办法：
1.将test-box-1放在test-box-2后面。
解决IE7margin-top不生效
2.在test-box-2前面加一个空div。
解决IE7margin-top不生效
二、IE7下a标签里面的img点击失效
HTML代码：
<body>
<a href="http://baidu.com" target="_blank">
<div class="each-url">
<div>image</div>
<div>
<img src="./dog.jpg" alt="">
</div>
</div>
</a>
</body>
CSS代码：
<style>
img {
width: 80px;
}
a {
display: block;
width: 300px;
height: 100px;
}
.each-url {
width: 300px;
height: 100px;
background: red;
}
</style>
效果：
点击a标签内的img无反应
点击a标签下的img无反应，原因是a是行内元素，包住块级元素在IE7下会出现问题。
解决方法：
1.将img标签直接放在a标签下。
解决a标签下img无法点击
2.很多情况下我们想要把img放在div里面，这时候可以使用onclick事件，使用js跳转，但是要注意阻止默认事件和冒泡事件，不然在高版本浏览器会跳转两次。
解决a标签下img无法点击
三、IE7下的透明蒙层方法（rgba失效）
例子：
HTML代码：
<body>
<div class="shadow"></div>
<div class="alert"></div>
</body>
CSS代码：
<style>
.shadow {
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.alert {
width: 300px;
height: 300px;
background: red;
position: fixed;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
z-index: 2;
}
</style>
效果：
rgba失效，导致蒙层消失
解决方法：
1.使用opacity以及filter解决。
使用filter解决IE7透明蒙层问题
<style>
.shadow {
background: #000;
opacity: 0.4;
filter: alpha(opacity=40);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
</style>
四、IE7下图片出现边框
解决方法：
1.在img标签添加border:none或者border:0px。
<style>
img {
border: none;
}
</style>
五、IE7下z-index失效
例子：
HTML代码：
<body>
<div class="test-box-1">
<div class="test-box-2"></div>
</div>
<div class="test-box-3"></div>
</body>
CSS代码：
<style>
.test-box-1 {
position: relative;
}
.test-box-2 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background: black;
z-index: 3;
}
.test-box-3 {
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
background: red;
z-index: 2;
}
</style>
效果：
IE7下z-index失效
原因：IE7下定位元素的z-index是相对其父元素（同样为定位元素）的z-index设定的。
解决方法：
1.将父元素的定位属性去掉。
<style>
.test-box-1 {
/* position: relative; */
}
</style>
去掉父元素定位属性解决z-index问题
2.大多数情况下，我们希望父元素也是定位元素，这时候需要设置父元素的z-index。
<style>
.test-box-1 {
position: relative;
z-index: 3;
}
</style>
设置父元素z-index解决z-index问题
六、IE7下float:right会另起一行
例子：
HTML代码：
<body>
<div>这是左边的div</div>
<div class="fr" style="background:red">这是右边的div</div>
</body>
CSS代码：
<style>
.fl {
float: left;
}
.fr {
float: right;
}
</style>
效果：
IE7下float:right会另起一行
解决方法：
1.float:right的元素放在前面。
float:right的元素放在前面
2.左边的元素使用float:left。
左边的元素使用float:left
3.不使用float:right，使用position:absolute。
七、IE7下块级元素使用display:inline-block失效。
例子：
HTML代码：
<body>
<div>div1</div>
<div>div2</div>
</body>
CSS代码：
<style>
div {
display: inline-block;
}
</style>
效果：
IE7下div使用display:inline-block失效
解决方法：
1.使用float:left。
使用float:left解决IE7块级元素display:inline-block失效问题
八、IE7下getAttribute('class')失效。
例子：
HTML代码：
<body>
<div id="div-id" class="div-class">div</div>
</body>
JS代码：
alert(document.getElementById('div-id').getAttribute('class'));
效果：
IE7下getAttribute('class')失效
解决方法：
1.使用getAttribute('className')。
IE7下使用getAttribute('className')获取类名
alert(document.getElementById('div-id').getAttribute('className'));
