此为我遇到过的一些ie兼容问题，因为做的项目都要至少兼容ie7！！！所以只针对ie7进行了一些汇总
1.ie下拉框解决方案
<!-- 注：此为ie下拉框解决方案
//正常情况下使用select标签，ie低版本样式会出问题，IE浏览器下 的select 实在是
//各种…… 不好看……，
//可是项目要求至少兼容IE7 ， 为了长得好看些，只能手动去编辑一个类似 select 的
//存在了， 测试过IE7 以上！！！
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 300px;
margin: 100px auto;
padding: 20px;
}
.ul {
display: none;
list-style: none;
margin: -2px 0 0;
padding: 5px 0;
border: 1px solid #0ad0f0;
border-top: 0;
}
.ul li>a {
display: block;
padding: 2px 5px;
border: 1px solid transparent;
color: #000;
text-decoration: none;
}
.ul li>a:hover {
border: 1px solid #83B7D3;
border-radius: 3px;
color: #fff;
/* background-image: linear-gradient(#68daff, #19baf2, #68daff); */
background: skyblue;
}
#selected {
position: relative;
border: 1px solid #0ad0f0;
border-radius: 5px;
padding: 5px 10px;
}
.bg1 {
position: absolute;
top: 12px;
right: 5px;
border-width: 6px;
border-style: solid;
border-color: #02a2ff transparent transparent transparent;
}
</style>
</head>
<body>
<div id="d1">
<div id="selected">
<span id="content" data-id="">-请选择-</span>
<b class="bg1"></b>
</div>
<ul class="ul">
<li><a href="javascript:;" data-id="1">选项一</a></li>
<li><a href="javascript:;" data-id="2">选项二</a></li>
<li><a href="javascript:;" data-id="3">选项三</a></li>
<li><a href="javascript:;" data-id="4">选项四</a></li>
<li><a href="javascript:;" data-id="5">选项五</a></li>
</ul>
</div>
<script src="./js/jQuery.js"></script>
<script>
$(document).ready(function() {
$("#selected").click(function() {
$(".ul").toggle();
});
});
$(".ul li>a").click(function() {
$("#content").html($(this).html())
.attr("data-id", $(this).attr("data-id"));
$(".ul").css("display", "none");
})
</script>
</body>
</html>
<!-- 注：此为ie下拉框解决方案
//正常情况下使用select标签，ie低版本样式会出问题，IE浏览器下 的select 实在是各种…… 不好看……，
//可是项目要求至少兼容IE7 ， 为了长得好看些，只能手动去编辑一个类似 select 的存在了， 测试过IE7 以上！！！
-->
2.ie圆角问题
在实际项目中用什么方法实现圆角效果(要兼容ie7)
答：针对ie7，只能用图片拼
3.box-shadow问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
box-shadow: 5px 0px 0px #333;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
<!-- 注
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:阴影水平偏移的距离，大于0表示向右偏移，小于0表示向左偏移，等于0等于没有水平偏移。该参数为必需参数。
v-shadow:阴影垂直偏移的距离，大于0表示向下偏移，小于0表示向上偏移，等于0表示没有垂直偏移。该参数为必需参数。
blur:阴影的模糊距离，该参数为可选参数。
spread:阴影的尺寸，该参数为可选参数。0px代表阴影和当前的实体一样大，大于0则表示大于实体的尺寸。
color:阴影的颜色，该参数为可选参数。参数的形式有：black(英文)、#000000(16进制)、RGB:(0,0,0)(10进制)等。
inset:将外部阴影 (outset) 改为内部阴影。该参数为可选参数。
!!!!针对ie7 8 通过美工给的图片来设置
-->
4.float盒子问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.search {
width: 642px;
height: 40px;
/* margin-top: 14px; */
/* position: absolute; */
/* right: 40px; */
}
.search input {
width: 535px;
height: 38px;
border: 1px solid #b8b8b8;
}
.btn {
width: 105px;
height: 40px;
background: #3388ff;
text-align: center;
line-height: 40px;
font-size: 18px;
font-weight: bold;
color: #fff;
cursor: pointer;
}
.searchBox a {
font-size: 16px;
margin-top: 25px;
}
</style>
</head>
<body>
<div class="searchBox clear offhiden">
<!-- <div class="logo fl">
<img src="./img/logo.png" alt="">
</div> -->
<div class="search fr">
<input type="text" class="fl">
<div class="btn fr">百度一下</div>
</div>
<!-- <a target="_blank" href="#" class="fr">帮助</a> -->
</div>
</body>
</html>
<!-- 注：自己练习发现的一个兼容问题，在谷歌高版本中给input加左浮动，div加右浮动，谷歌高版本能浮动起来，但在ie7却浮动不了，
解决，给input加display：block让input成为盒子使其浮动
-->
5.ie7li底部间隙的BUG
问题描述：在ie67下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙。
解决办法：给li设置 float:left或者给li加vertical-align:top。
<style>
.list{ width:300px;margin:0;padding:0;}
.list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; vertical-align:top;}
.list a{float:left;}
.list span{float:right;}
/*
IE6，7下li的间隙
在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙
解决办法: 1.给li加浮动 或者 2.给li加vertical-align:top;
*/
</style>
<body>
<ul class="list">
<li>
<a href="#">文字文字文字文字文字</a>
<span>作者</span>
</li>
<li>
<a href="#">文字文字文字文字文字</a>
<span>作者</span>
</li>
</ul>
</body>
6.表单控件1px间隙
问题描述：在IE6，7下输入类型的表单控件上下各有1px的间隙。
解决办法：给input加浮动。
<style>
.box{ width:200px;height:32px;border:1px solid red;}
input{width:100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}
</style>
<div class="box">
<input type="text" />
</div>
7.表单控件加border:none无效
问题描述：在IE6，7下输入类型的表单控件加border:none无效。
解决办法：重置input的背景。
.box{ width:200px;height:32px;border:1px solid red;background:yellow;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:#fff;}
<div class="box">
<input type="text" />
</div>
8.表单控件背景图片会移动
问题描述：在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动。
解决办法：把背景加给父级。
.box{ width:100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}
<div class="box">
<input type="text" />
</div>
9.关于position：relative引起的遮挡问题
问题描述：在IE6，7下通常遇到两个盒子遮挡问题
解决办法：比较两个遮挡盒子的父元素的层级，层级大的在上面，层级小的在下面
10.ie6 float bug
针对IE6 对 float 元素显示不正常的问题，有两种解决方法
解决方案一：准确计算内部 float 元素加在一起占用的宽高，确保外层 div 在 css 中明确指定了具体的 width 和 height 像素值，问题不会再出现。
解决方案二：给浮动的div加上两个语句 1、浮动的div 设置display:inline 2、浮动的div 加overflow:hidden
此博客为了我方便查找所整理，目前只整理到这些，如有不对的地方请指正
更多内容参考我的博客：http://www.cyldream.com/e/action/ShowInfo.php?classid=5&id=93
600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
