IE兼容

最新推荐文章于 2025-04-07 16:34:20 发布

Freezezeling

最新推荐文章于 2025-04-07 16:34:20 发布

阅读量305

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Freezezeling/article/details/78501173

IE兼容：

1.IE6/IE7显示垂直滚动条
表现描述:
有时候页面就几个字，根本没有超出显示范围，IE6/IE7还会显示垂直滚动条。
解决方法:
将html样式设置overflow属性
html{
overflow:auto;
}

2.浏览器内外边距间距不同
div {
margin-left:30px;
background-color:#a6d4c7;
}
解决方法: *{margin:0;padding:0;}

3.楼梯式效果：<IE浏览器出现>


<style>
ul {
list-style:none;

}
ul li a {
display:block;
width:100px;
height:30px;
text-align:center;
color:#600;
float:left;
border:2px solid #a3d0f4;
margin-top:10px;
}
</style>

<body>
<ul>
<li><a href="#">a>li>
<li><a href="#">a>li>
<li><a href="#">a>li>
<ul>
</body>

解决方法：
ul li {
float:left;
/*display: inline;*/
}

4.图片默认有间距:

多个img放在一起的时候，IE浏览器中图片排列会有默认的间距
<img src="tb.jpg" alt="">
<img src="pic.jpg" alt="">
<img src="pic1.jpg" alt="">
解决方案：使用float属性为img布局，
img {
float:left/right;
}

5.
标签最低高度设置min-height不兼容
p{
color:
min-height:200px;
height:200px;
width:200px;
}

解决方法：
p{
min-height:200px;
height:auto !important;
height:200px; }

6.父级div中的两个子div没有并排排列，而垂直排列在第一个div下方
解决方案：
overflow:hidden;

代码展示：
<style>
.all{
border: solid 1px #36F;
width: 400px;
overflow: auto;
}
.first,second {
border: solid 1px #36F;
width: 100px;
height: 100px;
margin: 20px;
padding: 10px;
float: left;

}
</style>
<div class="all">
<div class="first"></div>
<div class="second"></div>
</div
7.li垂直排列中间有间距
原代码展示：
ul {
list-style:none;

}
ul li a {
display:block;
width:100px;
background: #95CFEF;
}

<ul>
<li><a href="#">a<li>
<li><a href="#">a<li>
<li><a href="#">a<li>
<ul>

解决方法：加高度height
ul li a {
display:block;
width:100px;
height:30px;
background: #95CFEF;
}
或者：li 中加display
ul li {
display:block;
}