首页 > 代码库 > ie6,ie7,ie8 css bug汇总以及兼容解决方法
ie6,ie7,ie8 css bug汇总以及兼容解决方法
1:li边距“无故”增加
任何事情都是有原因的,li边距也不例外。
先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响。所以只好笨手笨脚地把padding去掉,换成margin。这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象。
解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置ul的显示形式为*display:inline-block;即可,前面加*是只 针对IE6/IE7有效,其他浏览器并不渲染这个属性。
2:分页数字 字体用“Arial ”加粗不抖动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
<title>无标题文档</title>
<link href="http://www.mamicode.com/css/style.css"rel="stylesheet"type="text/css"/>
<style type="text/css">
body, ul, h1 {
font-family:Arial;
font-size:12px;
}
.page {
text-align:center;
}
.page a {
display:inline-block;
padding:5px 8px;
text-decoration:none;
border:1px solid #09F;
color:#FFF;
}
.page a:hover, .page .selected {
border:1px solid #CCC;
color:#000;
font-weight:bold;
}
</style>
</head>
<body>
<h1>分页样式</h1>
<div class="page"> <a href="http://www.mamicode.com/#">1</a> <a href="http://www.mamicode.com/#"class="selected">2</a> <a href="http://www.mamicode.com/#">3</a> <a href="http://www.mamicode.com/#">4</a> <a href="http://www.mamicode.com/#">5</a>
<a href="http://www.mamicode.com/#">6</a> <a href="http://www.mamicode.com/#">7</a> <a href="http://www.mamicode.com/#">8</a> <a href="http://www.mamicode.com/#">9</a> <a href="http://www.mamicode.com/#">10</a> </div>
</body>
</html>
3:IE6 CSS选择器区分IE6
IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。
/*IE6 专用 */
.content {color:red;}
/* 其他浏览器 */
div>p .content {color:blue;}
4:IE6最小高度
IE6 不支持min-height属性,但它却认为height就是最小高度。解决方法:
使用ie6不支持但其余浏览器支持的属性!important。
#container{min-height:200px; height:auto !important; height:200px;}
5:IE6100% 高度
在IE6下,如果要给元素定义100%高度,必须要明确定义它的父级元素的高度,如果你需要给元素定义满屏的高度,就得先给html和body定义height:100%;。
6:IE6躲猫猫bug
在IE6和IE7下,躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素,如果在他之后有不浮动的内容,并且有一些定义了:hover的链接,当鼠标移到那些链接上时,在IE6下就会触发躲猫猫。
解决方法很简单:
1.在(那个未浮动的)内容之后添加一个<span style="clear: both;"> </span>
2.触发包含了这些链接的容器的hasLayout,一个简单的方法就是给其定义height:1%;
7:IE6绝对定位元素的1像素间距bug
IE6下的这个错误是由于进位处理误差造成(IE7已修复),当绝对定位元素的父元素高或宽为奇数时,bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值,但对于液态布局没有完美的解决方法。
8:IE下z-index的bug
在IE浏览器中,定位元素的z-index层级是相对于各自的父级容器,所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index,有些情况下还需要定义position:relative。
9: Overflow Bug
在IE6/7中,overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。
10: 横向列表宽度bug
如果你使用float:left;把<li>横向摆列,并且<li>内包含的<a>(或其他)触发了 hasLayout,在IE6下就会有错误的表现。
解决方法很简单,只需要给<a>定义同样的float:left;即可。
11: 列表阶梯bug
列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发,我们本意是要做一个横向的列表(通常 是导航栏),但IE却可能呈现出垂直的或者阶梯状。
解决办法就是给<li>定义float:left;而非子元素<a>,或者 给<li>定义display:inline;也可以解决。
12: 垂直列表间隙bug
当我们使用<li> 包含一个块级子元素时,IE6(IE7也有可能)会错误地给每条列表元素(<li>)之间添加空隙。
解决方法:把<a>flaot并且清除float来解决这个问题;另外一个办法就是触发<a>的hasLayout(如定 义高宽、使用zoom:1;);也可以给<li> 定义display:inline;来解决此问题;另外还有一个极有趣的方法,给包含的文本末尾添加一个空格。
13: IE6调整窗口大小的 Bug
当把body居中放置,改变IE浏览器大小的时候,任何在body里面的相对定位元素都会固定不动了。
解决办法:给body定义position:relative;就行了。
14: 文本重复Bug
在IE6中,一些隐藏的元素(如注释、display:none;的元素)被包含在一个浮动元素里,就有可能引发文本重复bug。
解决办法:给浮动元素添加display:inline;。
15:链接a的title属性中的文字换行
在IE7/FF中,鼠标移动到链接上时,”淘你喜欢”字样会变为红色,但IE6则无反应。所以IE6的bug就是如果a 与 a:hover 的css定义是一样的,也就是说如果a:hover 中没有样式的改变,hover就不会被触发。但如果在a:hover{}增加一些特定的属性,例如
a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}
此时hover就可以触发了。
23:原来IE6支持!important
.demo { color:#F00!important; color:#000; }/*IE6显示错误理解:.demo显示为黑色*/
/*而下面IE6是正确理解的:.demo显示为红色*/
.demo { color:#F00!important;}
.demo { color:#000; }
24:去掉button按钮左右两边的留白
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{padding:0; margin:0}
input,button{overflow:visible;padding:0;}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="submit" name="button" id="button" value="http://www.mamicode.com/button按钮左右留白的解决方法" />
</form>
<button><span>button按钮左右留白的解决方法</span></button>
</body>
</html>
25:中文字体在css中的写法
黑体SimHei\9ED1\4F53黑体
宋体SimSun\5B8B\4F53宋体
新宋体 NSimSun\65B0\5B8B\4F53新宋体
仿宋FangSong\4EFF\5B8B仿宋
楷体KaiTi\6977\4F53 楷体
微软正黑体Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微软正黑体
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1微软雅黑
幼圆 YouYuan\5E7C\5706幼圆
26: ie6里width:100%是相对于上有高度设置的元素 其他浏览器是相对于上个相对定位或绝对定位的元素
<div style=" width:600px; height:600px; background:#000;">
<div style=" width:500px; height:500px; background:#333;">
<div style=" float:left; background:#666; width:400px;" >
<div style=" width:300px; height:300px; background:#999;">
<div style=" width:100%; height:100%; background:#f00; position:absolute; left:0; top:0;">
在非ie6的浏览器中都是满屏幕的红, 说明非ie6的浏览器的width和height的百分比,都是相对的上个相对定位或者绝对定位的元素,没有就为html元素,而ie6中的width和height 的百分比,相对的是上个有高宽显示设置的元素,而且height的百分比设置失效,所以上述代码在ie6中就出现宽度穿越了他的父元素而遇见width:500px;的元素的时候,边把自己设置成了width:500px;而height的设置则失效, 这个, 让人很蛋疼!ie6,真的该早点走了!
</div>
</div>
</div>
</div>
</div>
27: ie不缓存背景图片的解决办法
高性能web开发中,一张小小的图片请求能省的就省,可IE6存在不缓存背景图的bug.如果重复使用了一个图片作为背景,那么每用一次就会重新去服务器拉一次。。。给服务器带来巨大的压力。解决方法有两种,
1:采用JS
var ua = navigator.userAgent.toLowerCase();
var isIE6 = ua.indexOf("msie 6") > -1;//判断是否为IE6
// remove css image flicker
//IE6下默认不缓存背景图片,CSS里每次更改图片的位置时都会重新发起请求,用这个方法告诉IE6缓存背景图片
if(isIE6){
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
}
2.在页面上直接使用1个DIV元素来加载该图片,这样加载图片就能真正被缓存,鼠标移动也不会发送请求了。
28:ie6下css实现max/min-width/height
_width:expression(this.width>300?"300px":ture); max-width:300px;
_height:expression(this.height>300?"300px":ture); max-height:300px;
29:css空白外边距互相叠加的解决方法
body{width:300px; font-family:‘微软雅黑‘; font-size:1em; text-indent:10px; line-height:1.25;}
div{background:#000;margin:10px;}
div p{background:#f60;margin:15px}
这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果?
好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:
为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.
如何解决?本人比较推荐两种解决方式:
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid #ddd;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px
另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.
30:纯css解决多行文字垂直居中
<style type="text/css">
.alert{
width:400px;
height:250px;
display:table-cell;
vertical-align:middle;
line-height:1.5em;
border:1px solid red;
}
.alert_blank{
height:100%;
width:0;
display:inline;
vertical-align:middle;
zoom:1;
}
.alert_con{
width:100%;
zoom:1;
display:inline;
vertical-align:middle;
}
</style>
<div class="alert">
<div class="alert_con">哥乃多行文字垂直居中~哥乃多行文字垂直居中~哥乃多行文字垂直居中~哥乃多行文字垂直居中~</div>
</div>
其大概原理为:第一个alert_blank容器,display:inline以后作为行内元素,它的高度为100%,宽度却为0,相当于紧贴外层容器左边框的一条透明的线,这样就使得外层容器里面只存在一行。外层容易的vertical-align:middle使得其内部相当于一行文字垂直居中。真正盛放内容的div也是display:inline,它对外和blank垂直居中,只要内部文字不超过blank的高度,这个效果将是完美的。虽然从语义化上讲,用空白div布局说不太过去,但是瑕不掩瑜。另:zoom:1是为了触发hasLayout。
31:关于flash遮盖div浮动层
(a) place Flash embed script in <div> container (I use SWFObject.js)[将flash嵌入脚本放到一个div容器中]
(b) add wmode=transparent to Flash embed script[增加wmode=transparent 到flash嵌入脚本]
(c) set <div id="flashcontent"> container with z-index:-1; [将外层容器的z-index设置为-1]
(d) set <body> tag with style .. position:relative;left:0px;top:0px;z-index:0;
(otherwise Firefox does not accept negative z-index)
(e) set floating iframe in container with z-index: 99;[将浮动的iframe在容器中的zindex设置为99]
(f) use CSS to position flashcontent and htmlcontent containers.[使用css来调整flash容器和html容器的位置]
其他方案网上比较多见,不做阐述.在此说下使用第一个方案如何解决:
var so = new SWFObject("XXX.swf", "flashId", "宽度", "高度", "版本", "背景色");
//设置flash不遮盖div层
so.addParam("wmode", "opaque");
so.write("flashcontent");
如此设置即可让flash无法遮盖住div
32:如何处理ie6的文字行高
ie6下汉字就会显示偏上位置,而在标准浏览器中不存在这个问题字体 Tahoma,试下
不过如果有规定第一个字体是用啥的,那就只能忽略这个问题..我终于明白淘宝为啥把Tahoma字体放到第一位了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试ie6的文字行高表现</title>
<style type="text/css">
body,ul,li,p {margin:0;padding:0;}
body { font:12px/1.5 Tahoma,"宋体",Arial, Helvetica, sans-serif; }
ul {float:left;list-style:none; margin-bottom:10px;}
ul li, p { margin-top:4px;background:silver;clear:left;}
ul li {float:left;margin-top:4px;}
</style>
</head>
<body>
<ul>
<li>岁月不饶人哪</li>
<li>hjgt</li>
</ul>
<p>岁月不饶人哪</p>
<p>hjgt</p>
</body>
</html>
33:利用 CSS 跨浏览器地隐藏文字一法
ont-size:0; // for firefox & opera
color: transparent; // for webkit
overflow:hidden; // for IE
font-size:0;
filter:alpha(opacity=0);
自测后兼容的浏览器如下:
IE 6-8
Firefox 1-4
Opera 9-10
Safari 3-5
Chrome 1-6
34:button在chrome下默认有2px的margin
<button>在chrome下有两像素margin</button>
35:ie6和ie7里面margin失效
<div style="padding:20px;background:#f00;">
<div style="background:#fff;height:200px;margin:50px;">我的margin在ie里面失效了</div>
解决办法去掉里面div的高度
ie6,ie7,ie8 css bug汇总以及兼容解决方法