修复IE6下众多常见bug办法汇总
这是一篇转载的文章,为的是自己以后查找相关问题时方便点,所以我把不太相关的删除了,留下一些自认为比较重要的内容摘录如下,以备忘。
如何在IE下调试页面
在IE下调试页面很麻烦,Firefox下的扩展程序Firebug和Web Developer Toolbar都是很好用的工具,如果你想在IE或其他浏览器上使用firebug,可以用Firebug Lite。
在IE下有两种最好的调试方法:IE Collection和IETester,并且都是免费的(虽然有一点点缺陷)。IETester的开发者也提供了DebugBar这款IE插件免费供个人使用,但商业用户只可试用60天。
〖对IE6单独兼容〗
兼容IE6的第一步就是单独对IE进行兼容,你针对IE6所写的代码只影响IE6;有几种方法可以区分开IE6:IE特有条件注释、CSS选择器、JavaScript,我们将逐一讨论。
使用IE特有条件注释
微软给IE添加了条件注释以区分不同版本,任何东西都可以塞进条件注释里:标签、JavaScript、js文件、css、内联样式。可以使用条件注释来针对某一个IE浏览器版本来编写代码。
规则如下:(译注:可参考IE 特有注释(hack))
<p>这段文字会在所有浏览器显示</p> <!--[if lte IE 6]> <p>这段文字仅显示在 IE6及IE6以下版本。</p> <p>This message will only appear in versions of Internet Explorer less than or equal to version 6.</p> <![endif]--> <!--[if gte IE 6]> <p>这段文字仅显示在 IE6及IE6以上版本。</p> <p>This message will only appear in versions of Internet Explorer greater than or equal to version 6.</p> <![endif]--> <!--[if gt IE 6]> <p>这段文字仅显示在 IE6以上版本(不包含IE6)。</p> <p>This message will only appear in versions of Internet Explorer greater than version 6.</p> <![endif]--> <!--[if IE 5.5]> <p>这段文字仅显示在 IE5.5。</p> <p>This message will only appear in Internet Explorer 5.5.</p> <![endif]--> <!--在 IE6及IE6以下版本中加载css--> <!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" /> <![endif]--> <p>这段文字会在所有浏览器显示</p>
使用条件注释加载css的好处是这些样式是独立于其他css文件的,因此不会在编写兼容代码时弄得一团糟;而且当IE6的市场份额降低到不需要兼容时,可以快速的清理掉。
使用条件注释的唯一缺点是在IE浏览器下会增加额外的HTTP请求数,所以需要权衡是否这样做。但我不建议使用条件注释加载外部js文件,因为js文件会造成阻滞,在js未加载完之前其余文件都不会被加载;对于js请使用JavaScript程序来区分浏览器而非条件注释。
使用CSS选择器区分开IE6
如果你不打算使用条件注释,CSS选择器是另外一个区分开IE6的办法,IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。
示例:
<style type="text/css" > /* IE6 专用 */ .content {color:red;} /* 其他浏览器 */ div>p .content {color:blue;} </style> <div> <p class="header">Some Header Text Here</p> </div>
这个方法的缺点是容易把样式表弄得一团糟,所以一定要写好注释说明。
在示例中,针对IE6写的样式在其他浏览器中也会执行,但(标准浏览器中)之后的子选择器覆盖了之前的申明,而IE6不支持子选择器所以忽略了它。
扩展阅读:
使用JavaScript区分开IE6
如果你想要使用JavaScript区分开IE6,请看示例:
javascript
//原生JavaScript if(typeof document.body.style.maxHeight === "undefined") { alert('IE6 Detected'); } //MooTools(框架) if (Browser.Engine.trident4) { alert('IE6 Detected'); } //jQuery(框架) if (($.browser.msie) && ($.browser.version == "6.0")){ alert('IE6 Detected'); }
扩展阅读:
〖图片〗
PNG半透明图片
有很多JavaScript解决方案来修复IE6使用PNG-24图片,但除了Twin Helix’s IE5.5+ PNG Alpha Fix都不支持CSS sprites。
另外一个办法是使用IE特有的滤镜,可阅读Aaron Baxter的博客。或译者的《ie5+ PNG Fix》
JavaScript方式修复IE6 PNG
IE6下的圆角
可以详细阅读CSS 圆角菜单。
背景闪烁问题
如果你给链接、按钮用CSS sprites作为背景,你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存,每次触发hover的时候都会重新加载,可以用JavaScript设置IE6缓存这些图片:
javascript
document.execCommand("BackgroundImageCache",false,true);
其他解决方法:
〖布局〗
解决IE6布局方面的BUG非常的恼人!特别是在实现一个精美的设计稿时。
理解 hasLayout
许多IE6下的Bug及渲染问题都可以归于微软的私有概念hasLayout
。简要的说,在给元素定义具体的尺寸(如height
或width
)就会触发hasLayout
,在IE6下缺失或触发hasLayout会导致一些bug。
扩展阅读:
- 《On having layout》(译文)
- “HasLayout” Overview from Microsoft
- hasLayout CSS Bugs
IE6 盒模型
如果怪异模式(quirks mode)在IE6中启用,IE6将会使用微软旧版的盒模型:width是元素的实际宽度,内容宽度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)。最好的办法是申明正确的文档类型以避免触发怪异模式,或者避免给有border
或padding
的元素定义width
属性。当然你也可以考虑使用条件注释。
扩展阅读:
- IE CSS Tricks That Will Get You Every Time
- Internet Explorer And The CSS Box Model
- Internet Explorer Box Model Bug
最小高度
IE6 不支持min-height
属性,但它却认为height
就是最小高度。感谢Dustin Diaz提供了一个很好的方法:使用!important
,ie6会忽视它但其余浏览器不会。
注:IE6在同一个声明语句中(即一个综括号{}
)的属性定义,后面的总是会覆盖前面的,所以下例中后面的height覆盖掉了前面定义的important height
css
/* 所有浏览器 */ #container {min-height:200px; height:auto !important; height:200px;}
另一个方法是使用CSS 选择器:
css
/* 仅IE6 */ #container {min-height:200px; height:200px;} /* 其他浏览器 */ html>body #container { height:auto;}
最大高度
非常遗憾,在IE6下实现max-height
只能使用IE特有滤镜,或者可以使用JavaScript实现。我个人更建议使用JavaScript来解决,因为IE滤镜会消耗大量资源甚至会使浏览器崩溃,而且禁用JavaScript后这两种方法都无法生效。
JavaScript
javascript
//直接使用ID来改变元素的最大高度 var container = document.getElementById('container'); container.style.height = (container.scrollHeight > 199) ? "200px" : "auto"; //写成函数来运行 function setMaxHeight(elementId, height){ var container = document.getElementById(elementId); container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto"; } //函数示例 setMaxHeight('container1', 200); setMaxHeight('container2', 500);
100% 高度
在IE6下,如果要给元素定义100%高度,必须要明确定义它的父级元素的高度,如果你需要给元素定义满屏的高度,就得先给html
和body
定义height:100%;
。
css
/* 给child元素定义100%高度(IE6)*/ #parent {height:500px;} #child {height:100%;} /* 定义满屏高度(IE6)*/ html, body {height:100%;} #fullLength {height:100%;}
最小宽度
同max-height
和max-width
一样,IE6也不支持min-width
。有2个方法实现最小宽度,使用额外的标签、使用JavaScript。
javascript
//直接使用ID来改变元素的最小宽度 var container = document.getElementById('container'); container.style.width = (container.clientWidth < width) ? "500px" : "auto"; //写成函数来运行 function setMinWidth(elementId, width){ var container = document.getElementById(elementId); container.style.width = (container.clientWidth < width) ? width + "px" : "auto"; } //函数示例 setMinWidth('container1', 200); setMinWidth('container2', 500);
最大宽度
只能使用JavaScript。
javascript
//直接使用ID来改变元素的最大宽度 var container = document.getElementById(elementId); container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto"; //写成函数来运行 function setMaxWidth(elementId, width){ var container = document.getElementById(elementId); container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto"; } //函数示例 setMaxWidth('container1', 200); setMaxWidth('container2', 500);
双边距Bug
当元素浮动时,IE6会错误的把浮动方向的margin值双倍计算。Steve Clason给出了解决方法:给元素添加display:inline;
css
/*IE6下将产生双倍边距*/ .floatedEl {float:left; margin-left:100px;} /*修正*/ .floatedEl {float:left; margin-left:100px; display:inline;}
清除浮动
如果你想用div(或其他容器)包裹一个浮动的元素,你会发现必须给div(容器)定义明确的height
、width
、overflow
之中一个属性(除了auto值)才能将浮动元素严实地包裹。
示例:
<div id="container"> <div id="floated1"></div> <div id="floated2"></div> </div>
css
#container {border:1px solid #333; overflow:auto; height:100%;} #floated1 {float:left; height:300px; width:200px; background:#00F;} #floated2 {float:right; height:400px; width:200px; background:#F0F;}
译者常用的方式:
css
#container {zoom:1;} /* ie浏览器 */ #container:after{content:"