- 浏览: 1162450 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (224)
- Web UI (11)
- Dynamic Language (7)
- Framework (9)
- Note & Try (17)
- JavaScript (38)
- Ant/Gant/Maven (2)
- Database (5)
- Software Engineering (13)
- Career (29)
- Team Management (5)
- Performance (12)
- Algorithm (17)
- News & Commets (23)
- System Design (17)
- OO Design (8)
- API Design (3)
- Programming Paradigms (8)
- Asynchronous Programming (5)
- Architecture (6)
最新评论
-
a2320064997:
请问博主,排序的动图是怎么做出来的?
排序算法一览(二):归并类排序、分布类排序和混合类排序 -
你的微笑我得阳光:
试试验证码
reCAPTCHA项目 -
mack:
一般采用json
对象转换的问题 -
fly_hyp:
我也做了一个中文编程软件,叫趣智思成
一些中文编程语言 -
facingSun:
受教了
前端解耦的一个最简单示例
IE6终极备忘:修复IE6下 25+ Bugs
[译]IE6终极备忘:修复IE6下 25+ Bugs
2010年01月08日 | HTML/CSS, JavaScript
去年就想将IE的bug系统地整理下,但一直都忙于工作、学习没有完成,看到这篇E文后,我毫不犹豫的放下了手中的工作将之翻译出来。
由于是第一次译文,所以错误在所难免,欢迎大家批评指正。
原文:Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
翻译:http://www.vfresh.org/w3c/727(译文对原文进行了补充)
转自:http://www.cnblogs.com/xcntime/articles/1797140.html
对IE6最好的策略就是不去兼容它。
好吧,我知道你的难处,你不得不去兼容IE6这个狗血的浏览器,因此不得不在兼容IE6上花费很多时间。对此,我颇有同感,来让我来帮助你吧。
我不会象许多文章那样让你去抵制IE6,这并不会帮助到你(迫不得已时)去兼容IE6;因为IE6依旧占有一定的市场份额,你无法放弃IE6。本文将帮助你来解决这个难题。
我查阅过很多资料来摘录这些解决方案(有些是我自己提供的),现在我做成手册提供给大家搞定IE6这个家伙。我尽可能的提供了最优解决方案而不是一些hacks,并且提供了一些相关的资料。如果你发现有更好的方法或者本文有错误,请联系我。
【目录】
〖策略〗
在讨论IE6的BUG及如何修复之前,有必要先讲一些策略去避免这些恼人的问题——正所谓防患于未然 。
- IE6 市场占有率
- 做一个简洁的设计
- 使用合适的文档申明(doctype)
- 验证你的代码
- 先对标准浏览器进行兼容
- 渐进增强(Progressive Enhancement)
- 使用自己的预设样式(CSS Reset)
- 使用JavaScript框架
- 使用JavaScript模拟标准浏览器
- 如何在IE下调试页面
〖对IE6单独兼容〗
兼容IE6的第一步就是单独对IE进行兼容,你针对IE6所写的代码只影响IE6。
〖图片〗
〖布局〗
解决IE6布局方面的BUG非常的恼人!特别是在实现一个精美的设计稿时。
- 理解 hasLayout
- IE6 盒模型
- 最小高度
- 最大高度
- 100% 高度
- 最小宽度
- 最大宽度
- 双边距Bug
- 清除浮动
- 浮动层错位
- 躲猫猫bug(The Guillotine Bug)
- 绝对定位元素的1像素间距bug
- 3像素间距bug
- IE下z-index的bug
- Overflow Bug
〖列表〗
〖行为〗
ie6有着一些行为方面的BUG,究其原因是IE6版本太老了,不能完好地支持CSS2更不支持CSS3,而且微软固执的使用了其私有方法。
〖JavaScript〗
IE6有着数不尽的JavaScript bug,这里我不会讲解每一个IE6下JavaScript的bug,只摘取其中几个普遍的问题来讨论。
〖其他〗
〖相关资源〗
〖策略〗
在讨论IE6的BUG及如何修复之前,有必要讲叙一些策略去避免这些恼人的问题——正所谓防患于未然 。
IE6 市场占有率
据Market Share统计,目前(2009年8月)IE6 的市场占有率为25.25%,但是其他地方的统计明显要低,为18.1%;尽管统计结果不同,但都呈现出了下降的趋势(翻译此文时,淘宝的IE6用户已从70%跌破至69%)。但是最重要的,还是你自己网站的统计数据。如果你对你的网站进行了流量分析,那么IE6的占有率是否值得你去针对IE6进行开发?这需要你自己去权衡。
如果你网站绝大部分访问者不使用IE6并且不付费给你,那么你不必特意区针对IE6做兼容,从而节省时间、精力及资金。
做一个简洁的设计
在做设计的同时考虑代码的实现,可以避免一些布局上的问题。再复杂的设计稿也能用简洁的代码实现,如果你使用了过于繁冗的标签,那么你需要重新修缮设计稿。
如果你有丰富的开发经历,攻克过很多种布局难题,记录下你的解决方案,在以后碰到相同问题时可以提高开发效率。
使用合适的文档申明(doctype)
使用一个错误的文档声明会触发quirks mode(怪异模式),正确的文档声明可以保证你的页面在所有浏览器下保持一致的效果。使用其中的一个文档申明:HTML 5
, HTML 4.01 Strict
, HTML 4.01 Frameset
, HTML 4.01 Transitional
, XHTML 1.0 Strict
, XHTML 1.0 Frameset
, XHTML 1.0 Transitional
, or XHTML 1.1
HTML 5
html
HTML 4.01 Strict
html
HTML 4.01 Frameset
html
HTML 4.01 Transitional
html
XHTML 1.0 Strict
html
XHTML 1.0 Frameset
html
XHTML 1.0 Transitional
html
XHTML 1.1
html
验证你的代码
我曾听说过有些人认为校验代码没有任何实用价值,但我不这么认为。校验仅仅只需花费一点点时间,而且将受益于所有浏览器而非仅仅IE6;验证确保了向后兼容并且易于维护。至少也得验证XHTML!唯一可以忽略验证的情况是在你打算使用CSS3时。
先对标准浏览器进行兼容
在写代码的过程中,一开始在标准浏览器中测试(如 Firefox, Opera, Chrome等),然后再去测试非标准浏览器(如IE6/IE7),因为这些标准浏览器都遵循w3c标准,大多的处理方式都相同。你可以分开来单独去兼容“特别”的IE浏览器,这样做能规范你的代码,你将会因此拥有扎实的基础;而且如果你不再需要兼容这些非标准浏览器,你可以一次性删除这些修复兼容性代码。
渐进增强(Progressive Enhancement)
渐进增强(Progressive Enhancement)是为了确保没有页面特效后基本功能也是可用的。简单来讲,渐进增强是指在确保页面在禁用JavaScript后能正常运作后,再对页面添加各种特效(JavaScript动画、Ajax异步等等)。我们同样可以运用“渐进增强”原则来使用CSS3(或者一些CSS2)、HTML5以及其他IE6所不支持的web规范。
某些情况下,是无法让所有用户在任何浏览器下都完全一模一样,特别是那些使用IE6的用户。运用渐进增强策略,可以保证让那些用户至少使用到你网站(或网络应用)的基本功能。
更多渐进增强的资料:
- 理解渐进增强(译文)
- Understanding Progressive Enhancement
- Progressive Enhancement With CSS
- Progressive Enhancement: What It Is, And How To Use It?
- Graceful Degradation vs. Progressive Enhancement
- Pragmatic Progressive Enhancement – Why You Should Bother With It
使用自己的预设样式(CSS Reset)
每个浏览器都有各自不同的预设样式,在你的样式表之前使用预设样式(CSS Reset)可以避免在之后编写冗长的浏览器兼容样式。在网上有很多CSS Reset可供参考。
简单CSS Reset示例:
css
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
一些可供参考的CSS Resets:
使用JavaScript框架
如果你的网站使用了较多的JavaScript特效,建议使用JavaScript框架。大部分的js框架都兼容了包括IE6在内的各种浏览器。可选的框架有很多,但一般能用一种框架实现的效果一定可以用另外一种框架实现,所以你可以根据个人喜好来选择合适的框架。
以下是一些常用的JavaScript框架:
强烈推荐实用MooTools,但如果你是入门者,还是建议使用jQuery。
使用JavaScript模拟标准浏览器
现在有一些JavaScript来使IE模拟标准浏览器,如果你有较高比例的用户使用IE6并且开启了JavaScript,可以考虑使用Dean Edwards的IE7或者类似的脚本。
译者注:不建议使用这些脚本,因为这些“模拟”的实现往往会消耗大量的资源,IE本来就够烂了。
如何在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))
html
这段文字会在所有浏览器显示
<!--[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]-->
这段文字会在所有浏览器显示
使用条件注释加载css的好处是这些样式是独立于其他css文件的,因此不会在编写兼容代码时弄得一团糟;而且当IE6的市场份额降低到不需要兼容时,可以快速的清理掉。
使用条件注释的唯一缺点是在IE浏览器下会增加额外的HTTP请求数,所以需要权衡是否这样做。但我不建议使用条件注释加载外部js文件,因为js文件会造成阻滞,在js未加载完之前其余文件都不会被加载;对于js请使用JavaScript程序来区分浏览器而非条件注释。
使用CSS选择器区分开IE6
如果你不打算使用条件注释,CSS选择器是另外一个区分开IE6的办法,IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。
示例:
html
<style type="text/css">/* IE6 专用 */.content {color:red;}/* 其他浏览器 */div>p .content {color:blue;}</style>
Some Header Text Here
这个方法的缺点是容易把样式表弄得一团糟,所以一定要写好注释说明。
在示例中,针对IE6写的样式在其他浏览器中也会执行,但(标准浏览器中)之后的子选择器覆盖了之前的申明,而IE6不支持子选择器所以忽略了它。
扩展阅读:
使用JavaScript区分开IE6
如果你想要使用JavaScript区分开IE6,请看示例:
javascript
//原生JavaScriptif(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
最大宽度
只能使用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值)才能将浮动元素严实地包裹。
示例:
html
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:"/0020";display:block;height:0;clear:both;} /*标准浏览器*/
扩展阅读:
浮动层错位
当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width
值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。
浮动层错位问题在IE6下没有真正让人满意的解决方法,虽然可以使用overflow:hidden;
或overflow:scroll;
来修正,但hidden
容易导致其他一些问题,scroll
会破坏设计;JavaScript也没法很好地解决这个问题。所以我的建议是一定要避免这个问题发生,使用一个固定的布局或者控制好内容的宽度。
扩展阅读
- Float Drop – floated elements drop below their expected position
- Internet Explorer 6 and the Expanding Box Problem
躲猫猫bug
在IE6和IE7下,躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素,如果在他之后有不浮动的内容,并且有一些定义了:hover
的链接,当鼠标移到那些链接上时,在IE6下就会触发躲猫猫。
头大了吧!但别担心,well-documented提供了详细的解决方法。
不管为何会触发这个问题,解决方法很简单:
- 在(那个未浮动的)内容之后添加一个
- 触发包含了这些链接的容器的
hasLayout
,一个简单的方法就是给其定义height:1%;
扩展阅读:
绝对定位元素的1像素间距bug
IE6下的这个错误是由于进位处理误差造成(IE7已修复),当绝对定位元素的父元素高或宽为奇数时,bottom
和right
会产生错误。唯一的解决办法就是给父元素定义明确的高宽值,但对于液态布局没有完美的解决方法。Paul O’Brien有关这个bug有一篇文章来讲解。
扩展阅读:
3像素间距bug
在IE6中,当文本(或无浮动元素)跟在一个浮动的元素之后,文本和这个浮动元素之间会多出3像素的间隔,Stu Nichols有一个非常好的解决方法。
译注:可运行下面代码来查看作者提供的修复方法
html
<style type="text/css">.container {width:750px; height:237px; margin:50px auto; background:url(http://www.cssplay.co.uk/ie/3pxbug/bug.jpg) no-repeat center top;}.container #page1,.container #page2 {width:30%; margin:0 auto 0 auto; padding-top:80px;} .container .topMid {overflow:hidden; height:15px; background: url(http://www.cssplay.co.uk/ie/3pxbug/topmid.png);}.container .topLeft {overflow:hidden; width:20px; height:15px; float:left; background:url(http://www.cssplay.co.uk/ie/3pxbug/topleft.png);}.container .topRight {overflow:hidden; width:25px; height:15px; float:right; background:url(http://www.cssplay.co.uk/ie/3pxbug/topright.png);} .container .content {height:100px; margin-right:25px; background:#ccc;}.container .content h2 {font-size:20px; height:80px; line-height:70px; text-align:center; margin:0;}.container .midLeft {width:20px; height:100px; float:left; background: url(http://www.cssplay.co.uk/ie/3pxbug/midleft.png);}.container .midRight {width:25px; height:100px; float:right; background: url(http://www.cssplay.co.uk/ie/3pxbug/midright.png);} .container .bottomMid {overflow:hidden; height:20px; background: url(http://www.cssplay.co.uk/ie/3pxbug/bottommid.png);}.container .bottomLeft {overflow:hidden; width:20px; height:20px; float:left; background:url(http://www.cssplay.co.uk/ie/3pxbug/bottomleft.png);}.container .bottomRight {overflow:hidden; width:25px; height:20px; float:right; background:url(http://www.cssplay.co.uk/ie/3pxbug/bottomright.png);} /* 给浮动层添加 display:inline 和 -3px 负值margin */ .container #page2 .topLeft,.container #page2 .midLeft,.container #page2 .bottomLeft {display:inline;margin-right:-3px;}.container #page2 .topRight,.container #page2 .midRight,.container #page2 .bottomRight {display:inline;margin-left:-3px;} /* 给中间的内容层定义 margin-right 以纠正-3px */ * html #page2 .content {margin-right:22px;}</style>
〖3px Bug〗
〖3px Bug 已修正!〗
IE下z-index的bug
在IE浏览器中,定位元素的z-index
层级是相对于各自的父级容器,所以会导致z-index
出现错误的表现。解决方法是给其父级元素定义z-index
,有些情况下还需要定义position:relative
扩展阅读:
Overflow Bug
在IE6/7中,overflow
无法正确的隐藏有相对定位position:relative;
的子元素,如下例:
html
<style type="text/css">.wrap {overflow:hidden;width:100px;height:100px;background:#336600;border:solid #666600 5px;}.child {position:relative;width:50px;height:200px;background:#99CC00;}</style>
解决方法就是给外包容器.wrap
加上position:relative;
。
〖列表问题〗
最为特别的IE许多bug都会影响到列表,这里例举了一些示例。
横向列表宽度bug
如果你使用float:left;
把横向摆列,并且
(或其他)触发了hasLayout,在IE6下就会有错误的表现:
html
<style type="text/css">#menu li {float:left;list-style:none;background:#CCCCFF;}#menu li a {padding:0 10px;display:block;height:20px;/* 触发了hasLayout */}</style>
解决方法很简单,只需要给定义同样的
float:left;
即可。
列表阶梯bug
bug示例:
html
<style type="text/css">ul { clear: both; list-style: none;}a { display: block; float: left; background: #99CCFF;}#two a { font-size: 1.1em;}</style>
列表阶梯bug通常会在给的子元素
使用
float:left;
时触发,我们本意是要做一个横向的列表(通常是导航栏),但IE却可能呈现出垂直的或者阶梯状。
解决办法就是给定义
float:left;
而非子元素,或者给
display:inline;
也可以解决。
垂直列表间隙bug
当我们使用包含一个块级子元素时,IE6(IE7也有可能)会错误地给每条列表元素(
BUG代码:
html
<style type="text/css">ul {margin:0; padding:0; list-style:none;}li a {display:block; background:#ddd;}</style>解决方法:
Jon Hicks把flaot并且清除float来解决这个问题:
css
ul {margin:0; padding:0; list-style:none;}li a {display:block; padding:0.5em; background:#ddd; float:left; clear:left;}另外一个办法就是触发的
hasLayout
(如定义高宽、使用zoom:1;
)
css
ul {margin:0; padding:0; list-style:none;}li a {display:block; padding:0.5em; background:#ddd; zoom:1;}/* height:1%; 也有同样的作用 */也可以给
定义display:inline;
来解决此问题。
html
扩展阅读:
〖行为〗
ie6有着一些行为方面的BUG,究其原因是IE6版本太老了,不能完好地支持CSS2更不支持CSS3,而且微软固执的使用了其私有方法。
IE6中的:hover
在IE6中,除了(需要有
href
属性)才能触发:hover
行为,这妨碍了我们实现许多鼠标触碰效果,但还是有一些法子是可以解决它的。
最好是不要用:hover
来实现重要的功能,仅仅只用它来强化效果。
许多修复IE6 hover的方法都是使用微软提供的私有方法behavior或者JavaScript,通常使用JavaScript框架或者IE6修复类js。
在IE浏览其中使用Canvas
标签
canvas是HTML5新引入的元素,提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。
所有IE浏览器都不支持HTML5中的canvas标签,而是使用它微软私有的VML,但是可以通过JavaScript来使canvas在IE下生效。
修复canvas的一些JavaScript:
- ExplorerCanvas (also called excanvas)
- ExplorerCanvas Google Group
- MooCanvas at Github, a MooTools implementation of excanvas
IE6调整窗口大小的 Bug
当把body
居中放置,改变IE浏览器大小的时候,任何在body
里面的相对定位元素都会固定不动了。Emil Stenström发现了IE6 Resize Bug并提供了解决办法:给body
定义position:relative;
就行了,够简单吧!~
〖JavaScript〗
IE6有着数不尽的JavaScript bug,这里我不会讲解每一个IE6下JavaScript的bug,只摘取其中几个普遍的问题来讨论。
Error: Expected Identifier, String, Or Number
IE浏览器不容许不良的JavaScript书写,如果在数组或者Hash对象的末尾有逗号就会引发异常“Expected Identifier, String, Or Number”,其他浏览器允许这样做,但在书写时注意删除末尾的逗号以避免这个错误。
IE中JavaScript内存泄露
由于IE浏览器使用其自己的内存管理,当JavaScript使用的内存没有被回收时就会引发内存泄露。可阅读《JScript的内存泄漏》及《Finally, the alternative fix for IE6’s memory leak is available》
〖其他〗
IE6中一些其他bug
文本重复Bug
在IE6中,一些隐藏的元素(如注释、display:none;
的元素)被包含在一个浮动元素里,就有可能引发文本重复bug:
html
<style type="text/css">.demobox {width: 250px;border: 3px solid #4c6f42;}.firstfloat {float: left;background: #939a90;}.secondfloat {float: left;width: 250px;margin-bottom: 2px;background: #fbdabb;}</style><!-- Begin live demo -->aa这段文字会被重复。。。这段文字会被重复。。。这段文字会被重复。。。这段文字会被重复。。。这段文字会被重复。。。
Position Is Everything详细讲解了这个问题,但解决办法很简单:给浮动元素添加display:inline;
。
css
.firstfloat {display:inline;}IE的收藏夹图标(Favicons)
收藏夹图标会以16×16像素大小显示在你的收藏夹里,有两种方法来显示收藏夹图标:
- 把一张图片命名为
favicon.ico
并放置在网站的根目录,IE及其他浏览区都会自动设置该文件为收藏夹图标; - 在区域声明:
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
需要注意的是收藏夹图标会被一直缓存,除非你清除浏览器的缓存,才会更新新的图标;如果你想要浏览者自动更新收藏夹图标,请给favicon.ico设置expires。
发表评论
-
JavaScript 3D图表
2013-08-24 19:36 3129在说3D图表以前,首先要明确两个概念,一个是数据的维度,一个 ... -
几道容易出错的JavaScript题目
2013-07-07 10:34 2268下面这几道JavaScript题目大多来自于周五的一个小分享 ... -
JavaScript使用for循环时出现的问题
2013-05-26 00:36 1661这个问题的讨论最初来自公司内部邮件,我只是把这个问题的讨论内 ... -
DNS劫持
2013-04-30 13:59 2174想谈一谈这个话题是因为最近有一位朋友抱怨他的博客在某些用户某 ... -
你没有抓住Promises的要点
2013-04-21 20:52 2469注:这篇文章翻译自《You're Missing the P ... -
吐槽一下新浪微博网页版的UI设计
2013-02-19 21:53 27801. 不一致的按钮。有向下箭头是鼠标悬停的时候显示下拉菜单吧 ... -
程序员,都去写一写前端代码吧
2013-01-19 01:16 2677你可以认为我是一个极 ... -
用JavaScript截图
2013-01-08 23:13 7648使用JavaScript截图,这里我要推荐两款开源组件: ... -
Bootstrap: New Net-volution
2013-01-04 13:13 1605A lot of companies developed ... -
JQuery表格插件介绍:Flexigrid和DataTables
2012-12-27 11:35 8977JQuery的表格插件有很多。Flexigrid和Dat ... -
Flot介绍
2012-12-22 18:56 2364最近在项目里面要用到JavaScript来绘制图表,JQ ... -
Function Invocation Patterns
2012-11-04 17:46 1363今天看到微博上大家在讨论一个JavaScript的小问题 ... -
d3介绍
2012-10-31 00:17 2607D3.js是一个基于数据的操作文档的JavaScript ... -
Dart,你凭什么挑战JavaScript?
2012-09-26 08:46 5849不妨先来打量一下JavaScript。JavaScrip ... -
网络图形标准
2012-07-06 00:24 1804网络图形标准 前端 ... -
Backbone.js介绍
2012-05-08 22:57 4455注:教程请参见这里(本文有很多内容都是从这里翻译的),官方网站 ... -
前端解耦的一个最简单示例
2012-05-04 21:11 5284且看这样一段HTML片段: <div id ... -
Web页面的聚合技术
2012-04-11 01:10 5694近接触到了Mason,并且了解到了它基础之上的一个MVC框架实 ... -
关于CommonJS
2012-03-26 00:37 17283老实说,之前我对CommonJS也是一无所知,直到不久前Nod ... -
转:关于亚马逊中国的界面风格
2012-02-17 00:00 2642问题:为什么 Amazon 的页面给我的感觉是一个人安静 ...
相关推荐
在IE6,7下元素要通过浮动并在同一行,就给这行元素都加浮动4.P标签中不要嵌套块元素5.IE6下最小高度问题在IE6下元素的高度的小于19px的时候,会被当做19px来处理解决办法:overflow:hidden;6.1px dotted 在IE6下不...
IE CSS Bugs点击查看 有错误或补充,欢迎提交 issue 。怎么做在 bugs.md 中添加讲解,将测试文件在 demo 目录。安装 及 node > 0.11命令行运行 node build.js,生成 index.html。参考资料版权
原文:Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs翻译:http://www.vfresh.org/w3c/727(译文对原文进行了补充) 在讨论IE6的BUG及如何修复之前,有必要讲叙一些策略去避免这些恼人的问题——...
BUGS软件是全球最受欢迎的贝叶斯分析软件之一,本书《The BUGS Book: A Practical Introduction to Bayesian Analysis》由BUGS软件的开发团队编写,是一本实践性强的入门书籍,提供了对BUGS程序及其使用的实用介绍。...
"BUGS_1.81.zip" 是一个包含BUGS软件1.81版本的压缩文件,这通常意味着它是一个软件发行包,用于分发和安装BUGS的特定更新或版本。BUGS(Bayesian Inference Using Gibbs Sampling)是一款流行的概率编程语言,专门...
6. 一键返航:Bugs 12EIS的一键返航功能能够让飞行器自动返航,用户可以通过摇杆控制飞行器以躲避障碍物。 7. 安全注意事项:在使用Bugs 12EIS时,需要注意电池的安装与取出,避免电池漏液造成对产品的损坏,同时...
本书介绍了防止程序中包含多种错误的技术。 它还讨论了如何测试程序以查找错误。
总的来说,Bugs Hunter 1.0.2.1作为一款PHP代码审计工具,为开发者提供了一种有效查找和修复安全漏洞的途径。尽管误报现象需要用户谨慎对待,但它仍然极大地提升了代码安全性的检查效率。结合人工审查和持续的学习,...
2014-6-25 1.5.2.04 支持Win8.1下直接安装必应输入法 增加全功能皮肤:支持软键盘、皮肤以及账户登录等触发按钮 新增经济学、生物学、国内地名等分类词库下载;设置向导内添加分类词库下载,支持一键安装 完善搜索...
+ Fix small bugs (thx to users) * 3.2.0 beta 2 (22/03/2010) o New: + License Manager now has a beta status + Option [live protection] was included in option [debug and trace block] + We continue works...
### Eclipse FindBugs 插件...此外,也可以访问百度文库链接:[http://wenku.baidu.com/link?url=GdN8P4-NHgI6fRFmxL9kQqHrvwupdPH_ghmKMraBJk7mCezifMs3OyKLm9UZFBnClj6oQI1bhQD6Wy4iva97oe3GMT3A5vDXtNRMd57W27i]...
【标题】"POJ1038--Bugs Integrated" 是一个编程竞赛题目,来源于著名的在线编程平台POJ(Programming Online Judge)。这类题目通常要求参赛者编写程序来解决特定问题,以此锻炼和测试他们的算法设计和编程能力。在...
`find_bugs`工具是一款广泛使用的静态代码分析工具,它主要针对Java程序,旨在帮助开发者在编码阶段就发现潜在的错误和不良编程习惯,从而提高软件质量和可维护性。这款工具通过扫描字节码来检测可能存在的问题,而...
智能关闭危险端口(bat文件) @echo off gpupdate >nul rem For Client only ipseccmd -w REG -p "HFUT_SECU" -o -x >nul ipseccmd -w REG -p "HFUT_SECU" -x >nul rem ipseccmd -w REG -p "HFUT_SECU" -r "Block ...
IE6 and IE7 Bugs. Retrieved from <https://www.quirksmode.org/bugreports/archives/ie_6_and_ie_7_bug.html> 七、扩展阅读 * 使用JavaScript创建纵向下拉菜单 * 使用HTML5和CSS3创建纵向下拉菜单 * 纵向下拉...
discovRE: Efficient Cross-Architecture Identification of Bugs in Binary Code是发表在NDSS'16会议上的论文。本文在SP'15的基础上提出了在效率和效果上都有提高的跨架构二进制代码漏洞检测方案。 Abstract & ...
Wordpress Bugsy模板是一款专为WordPress平台设计的网站模板,旨在提供美观且功能丰富的网站构建基础。这款模板以其独特的设计风格、高度可定制性以及对WordPress核心功能的出色支持而受到用户欢迎。在深入探讨Bugsy...