ie6 css bug终极修复指南

由 匿名 (未验证), 29 四月, 2013

对付Internet Explorer 6的最佳策略是不支持它。

呃，好吧，我感觉得到你的沮丧。你是一个Web开发人员，你准备好扯你的头发，因为你必须支持Internet Explorer 6中，但是，委婉地说，IE6不支持你。你已经花费了好几个小时在上面，但仍然做不出你想要的布局效果。我可以感同身受。我还可以帮助你。

This isn't one of those rants about IE6 or a campaign to try to kill it. There are enough of those around the web, but they don't help if you need to support IE6 because it still has a significant enough marketshare that you can't ignore it for business reasons. No, this is the resource you've been hoping for.

I've scoured the web for resources and also included some of my own fixes for IE6 and now I've put it all together in this cheatsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6. Where possible, I've done my best to provide the cleanest and valid solutions to each bug instead of ugly hacks. I've also tried to give proper credit for each case, but some of the solutions have been shared so many times that finding the original discover of each fix is difficult. If you see a missing credit or if I missed a bug and fix, please contact me and let me know and I'll update this page.

This massive IE6 guide took a while to put together, so bookmark it, share it, tweet it, and use it to save yourself and your coworkers hours of screaming at your monitor and banging your head against your desk or other inanimate objects. Don't be fooled, however, this cheatsheet is as much for me as it is for you.

Update: Yann Faurie has graciously provided a French translation of this article. Jiho-Choo and Sukjin-Lee have also provided a Korean translation, vicZen has translated the article into Chinese, and Dennis Bri has translated it into Russian. If you've translated this article into another language, please let us know so that we can update it.

Table Of Contents

SectionBug/Fix/Best PracticeStrategiesHow to Isolate IE6ImagesLayoutListsBehaviorJavaScriptMiscellaneousBonus Resources

Strategies

Before addressing IE6-specific bugs and fixes, it's important to first visit some strategies that will help minimize the occurence of troublesome issues. A little prevention is far more cost-effective than dealing with a multitude of bugs that could otherwise have been avoided by following best practices.

Contents | Top

IE6 Market Share

According to Market Share, the current percentage (August 2009) of users on IE6 is 25.25%, but other sources place the percentage much lower at 18.1% and . As much as the statistics vary, all show a downward trend. However, the only statistics that really matter are those for your own site. If you already have analytics for your website traffic, does the IE6 usage percentage for your site warrant developing for it? In business terms, what is the cost/benefit ratio for the time and money spent developing for IE6 versus dropping support for it all together? Can you make a business case to support the steadily dropping IE6?

If the majority of your website visitors don't use IE6 and it won't cost your business money, you can save yourself a lot of time, effort, and money by avoiding the IE6 problem all together.

Contents | Top

Plan Your Design and Keep It Simple

If you plan your design ahead, even taking just a few minutes to consider the best coding approach, you can sidestep some potential layout problems. Even the most complicated visual designs can and should be created with simple code solutions. If you find that you are using an excessive amount of markup, it may be a good sign that you should take another look at your design approach.

As you gain experience and conquer various layout issues, keep track of your results and the problem that you solved. I can almost guarantee you that you will run into the same problem again, and having a quick reference sheet will save you time in the future.

Contents | Top

Use A Correct Doctype

Failure to use a correct (or any) doctype will trigger quirks mode and will prevent your page from rendering consistently across browsers. Use one of the following doctypes: 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 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Contents | Top

Validate Your Code

I've heard a few people argue that there aren't any business reasons for validating code, but I don't buy it. Validation really isn't that hard to do in most cases, and it should only take a few minutes to perform. A few minutes spent validating both your XHTML and CSS can reap benefits in all browsers, not just Internet Explorer 6. Validation ensures forward compatibility and cuts down on maintenance. At the bare minimum, validate your XHTML markup. The only real reason it should be ignored is if you want to start taking advantage of some CSS3 properties for browsers that support them.

Contents | Top

Develop For Standards-Compliant Browsers First

In line with validating your code, you will avoid a lot of heartache by developing first for standards-compliant browsers like Firefox, Opera, Safari, and Chrome first, and then moving on to non-compliant browsers like IE6 and IE7. Because the compliant browsers will all render in more-or-less the same way, you will then be able to address the Internet Explorer "pecularities" separately. Using this workflow can also aid in future-proofing your code because it gives you a solid base and if you properly label your fixes, you can remove them painlessly once support for those browsers is no longer needed.

Contents | Top

Use Progressive Enhancement

Progressive enhancement simply means to make sure that basic functionality is available to all users before adding the polish. Generally, progressive enhancement refers to making web apps work without JavaScript and then using JavaScript to add animations, Ajax effects, etc., but, when speaking about Internet Explorer 6, one could also apply the progressive enhancement principle to using CSS3 (or even many parts of CSS2), HTML5, and other web protocols that IE6 doesn't support.

In some cases, it just might not be possible to deliver the same experience to all users in all browsers, especially those using Internet Explorer 6. Using the progressive enhancement strategy will ensure that those users will at least have the minimum features available while using your website or web app.

More on Progressive Enhancement

Contents | Top

Use A CSS Reset Rule

Each browser comes with its own default stylesheet and to no one's surprise, each one is different. A simple reset rule at the beginning of your stylesheet can go a long ways in writing cross-browser code. There are numerous reset rules around the internet, ranging from simple to detailed.

A Simple Reset

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}

Popular CSS Resets

Contents | Top

Use A JavaScript Framework

If JavaScript represents more than a trivial part of your website, consider using a JavaScript framework. Most frameworks have been tested in multiple browsers including IE6 and will handle many (though not all) of your JavaScript cross-browser issues automatically. There are a number of different JavaScript frameworks to choose from. In general, anything you can do in one can be done in another, so choose a framework based on your personal syntax preference.

Here is a list of some of the more popular frameworks:

There are certainly many other frameworks and more are always coming out of the woodwork, but listing all of them is for another day. Of those listed, I love, use, and wholeheartedly recommend MooTools if you know your way around JavaScript. If you're just starting out, jQuery would probably be my next recommendation.

Contents | Top

Use A JavaScript IE Fix Script

There are a few JavaScript solutions floating around the Internet that attempt to force Internet Explorer to act like a standards-compliant browser. If your target IE audience has a high-enough percentage of users with JavaScript enabled, you could try using Dean Edwards' IE7 or a similar script.

Contents | Top

How To Debug Internet Explorer

Internet Explorer can be notoriously difficult to debug, but there are a number of tools to make it easier on developers. As mentioned before, first develop for standards-compliant browsers. Firebug and Web Developer Toolbar are both excellent add-ons for Firefox and can help unravel or pre-empt many bugs in IE. If you want the power of Firebug in other browsers, Firebug Lite is now also available as a browser bookmarklet.

For testing multiple instances of Internet Explorer, the two best options apart from installing a virtual machine are currently IE Collection and IETester, both of which are free (but will also have the occasional bug). The makers of IETester also offer DebugBar, a plugin for IE that is free for personal use but requires a commercial license after 60 days for commercial use.

Contents | Top

How To Isolate IE6

The first step in dealing with Internet Explorer 6 is to be able to isolate it so that any changes you make will effect IE6 only and none of the other browsers. There are several ways to pinpoint IE6: with conditional comments, with CSS selectors, and with JavaScript. We'll look at each of these methods in turn.

Contents | Top

Using Conditional Comments For Internet Explorer

Microsoft included conditional comments as a way to target different versions of Internet Explorer. Anything can be placed within the conditional comments including markup, JavaScript, JavaScript files, CSS and external stylesheets. The conditional comments work so that you can target a specific version of Internet Explorer and any versions above or beneath a particular version.

The syntax is as follows:

<p>This message will appear in all browsers.</p>

<!--[if lte IE 6]>
	<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>This message will only appear in versions of Internet Explorer greater than or equal to version 6.</p>
<![endif]-->

<!--[if gt IE 6]>
	<p>This message will only appear in versions of Internet Explorer greater than version 6.</p>
<![endif]-->

<!--[if IE 5.5]>
	<p>This message will only appear in Internet Explorer 5.5.</p>
<![endif]-->

<!--Sample Conditional Stylesheet, IE6 and below-->
<!--[if lte IE 6]>
	<link type="text/css" rel="stylesheet" href="css/ie6.css" />
<![endif]-->

<p>This message will appear in all browsers.</p>

Using conditional stylesheets has several advantages to other methods. The stylesheet is separate from other stylesheets and so there is no confusion as to which browsers will be affected. Also, when IE6 drops to a significantly low enough market share, the stylesheet can be removed quickly without having to parse through each CSS declaration.

The sole disadvantage of using conditional files is that they add additional HTTP requests to the page for that browser. While this may be an acceptable trade-off for a stylesheet, I would recommend against using a conditional external JavaScript file because JavaScript files act as blockers and will prevent other files from loading until they have been completely loaded. If you need conditional JavaScript in an external file, use JavaScript itself to target the browser.

Contents | Top

How To Target IE6 with CSS Selectors

If you don't want to use conditional stylesheets, CSS selectors are another option for targeting IE6. Internet Explorer 6 doesn't support child selectors. You first make a CSS declartion for IE6 and then use child selectors to feed CSS declarations to IE7+ and all other modern browsers.

First, the HTML:

<div>
	<p class="header">Some Header Text Here</p>
</div>

Now the CSS:

/*This line for IE6*/
.content {color:red;}

/*This line for everyone else, using the child selector syntax*/
div>p .content {color:blue;}

The drawback with using this method is that it can make your stylesheet messy, so make sure to make clear notes in your comments. The CSS declaration for IE6 will also be detected and used by other browsers, so it's important that it comes before the child selector declaration. The reason the child selector overrides the first declaration is because it gives a higher degree of specificity to the declaration. Because IE6 doesn't recognize the syntax, it ignores it, but all other browsers will process it as they should.

Further Reading

Contents | Top

How To Use JavaScript To Detect IE6

If you want to detect IE6 using JavaScript, but don't want to use conditional comments, here's how:

//Pure JavaScript, no framework - NOTE: this must be placed in an onLoad event or after the body has loaded or it will result in an error
if(typeof document.body.style.maxHeight === "undefined") {
	alert('IE6 Detected');
}

//MooTools syntax (for IE7, use trident5)
if (Browser.Engine.trident4) {
	alert('IE6 Detected');
}

//jQuery syntax - Note that the browser method is now deprecated in favor of feature detection through the support method
if (($.browser.msie) && ($.browser.version == "6.0")){
	alert('IE6 Detected');
}

Further Reading

Contents | Top

Images

Internet Explorer 6 has a number of issues regarding images that can be show-stoppers if you're on a tight schedule or if you are wedded to a particular layout or design. This section is meant to help alleviate some of that pain.

Contents | Top

PNG Alpha Transparency Fix In IE6

One of the more frustrating aspects of Internet Explorer 6 is that it doesn't support transparency for high quality images, making layered layout effects difficult. There are some JavaScript solutions, which I'll list below, but none of them allow you to use CSS sprites, except for an Alpha version of Twin Helix's IE6 PNG Fix.

The simplest solution is to save your image as a PNG8 file with Alpha Transparency enabled. If you're using Adobe Fireworks, you can do this by clicking Save As > Save as type > Flattened PNG > Options > Alpha Transparency. If you're using any type of gradient, you can select the Dither checkbox to get a slightly better quality gradient. Saving as a PNG8 with Alpha Transparency will only render semi-transparent areas of the images as 100% transparent; there are no varied degrees of opacity.

Another option is to add an IE-specific filter in a CSS stylesheet that targets only IE6. Aaron Baxter explains the technique in a tutorial on his blog.

JavaScript PNG Fixes

Contents | Top

Rounded Corners In IE6

Rather than go into a detailed explanation here, I'll simply refer you to our tutorial on CSS Rounded Corners Menus, which covers a cross-browser method of creating rounded corners for menus or other layout elements.

Contents | Top

How To Solve Flickering Background Images

If you're using CSS sprites as background images for links or buttons, you'll notice that the image will flicker briefly in Internet Explorer 6. The reason is because IE6 doesn't properly cache the background image and reloads it every time. You can fix this with a single line of JavaScript that forces IE6 to cache the image.

document.execCommand("BackgroundImageCache",false,true);

Other Solutions

Contents | Top

Layout

The layout bugs of IE6 can be some of the most frustrating to deal with, especially when you're aiming for pixel-perfect design and it works in every browser but Internet Explorer 6. This section will address those bugs and how to fix them.

Contents | Top

Understanding hasLayout

A number of IE6 bugs and rendering errors can be attributed to Microsoft's proprietary concept of hasLayout. Briefly explained, hasLayout is triggered whenever an element is given specific dimensions, such as height or width. The absence of those declarations can result in one of the many bugs you'll no doubt run across while working with IE6.

Rather than going into a lengthy description of hasLayout, I'll simply refer you to an excellent tutorial on the subject by John Gallant and Holly Bergevin, which will detail when and how to deal with hasLayout.

Further Reading

IE6 Box Model

If quirks mode is triggered in Internet Explorer 6, IE6 will use Microsoft's older interpretation of the box model, which excludes borders and padding in the total width of an element. The best strategy in dealing with this bug is to avoid triggering quirks mode by using a correct doctype or to avoid applying the width property to an element that already has either the border or padding properties applied to it. Conditional comments can also be used, but should only be called upon as a last resort.

Further Reading

Contents | Top

Min Height

IE6 ignores the min-height property and instead treats height as the minimum height. Thanks to Dustin Diaz, a fix was discovered that uses the declaration !important, which IE6 will override but other browsers will not. This solution also works for min-width.

/*Works in all browsers*/
#container {min-height:200px; height:auto !important; height:200px;}

Another option is to use CSS selectors to accomplish the same effect in a different way.

/*For IE6*/
#container {min-height:200px; height:200px;}

/*For all other browsers*/
html>body #container { height:auto;}

Contents | Top

Max Height

Unfortunately, the only ways to achieve the max-height effect in IE6 are by using IE-specific CSS expressions, which are the equivalent of running JavaScript in a stylesheet, or by using JavaScript itself. Of the two, I recommend using the JavaScript solution as CSS expressions are expensive in terms of processing power and can cause the browser to crash. Both solutions will not function if JavaScript is disabled. Note that this solution is for IE6 only as all other browsers support max-height.

JavaScript

//Plain JavaScript, change the ID and dimensions to suit your code.
var container = document.getElementById('container');
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";

//An alternative function. Note: for dynamic resizing, attach to the window resize event
function setMaxHeight(elementId, height){
	var container = document.getElementById(elementId);
	container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
}

//Example usage
setMaxHeight('container1', 200);
setMaxHeight('container2', 500);

Contents | Top

100% Height

In order for an element to achieve 100% height in IE6, you will need to specify a fixed height of its parent element. If you want to make the element the full-length of your page, apply height:100%; to both the html and body elements.

/*100% height of the parent element for IE6*/
#parent {height:500px;}
#child {height:100%;}

/*100% of the page length for IE6*/
html, body {height:100%;}
#fullLength {height:100%;}

Contents | Top

Min Width

Like max-height and max-width, min-width is not supported by IE6. There are two solutions, applying extra markup to achieve the effect, or to use JavaScript.

JavaScript

//Plain JavaScript, change the ID and dimensions to suit your code.
var container = document.getElementById('container');
container.style.width = (container.clientWidth < width) ? "500px" : "auto";

//An alternative function. Note: for dynamic resizing, attach to the window resize event
function setMinWidth(elementId, width){
	var container = document.getElementById(elementId);
	container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
}

//Example usage
setMinWidth('container1', 200);
setMinWidth('container2', 500);

Contents | Top

Max Width

The only way to enact max-width in IE6 is by using JavaScript.

JavaScript

//Plain JavaScript, change the ID and dimensions to suit your code.
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

//An alternative function. Note: for dynamic resizing, attach to the window resize event
function setMaxWidth(elementId, width){
	var container = document.getElementById(elementId);
	container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
}

//Example usage
setMaxWidth('container1', 200);
setMaxWidth('container2', 500);

Contents | Top

Double Margin Float Bug

Internet Explorer 6 will incorrectly double the margin for floated elements with a margin applied on the same side as the element is floated. Steve Clason is credited with the fix, which is simply adding display:inline; to the floated element.

/*Causes a double margin bug in IE6*/
.floatedEl {float:left; margin-left:100px;}

/*The fix*/
.floatedEl {float:left; margin-left:100px; display:inline;}

Contents | Top

How To Clear Floats

If you're trying to wrap floated elements with a container, but the container doesn't wrap properly, explicitly set either a height or width property on the container to a value other than auto and also add the overflow property with one of the three following values: auto, hidden, or scroll. Alex Walker first wrote about this technique and gives Paul O'Brien credit for the idea.

Sample HTML

<div id="container">
	<div id="floated1"></div>
	<div id="floated2"></div>
</div>

Sample 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;}

Further Reading

Contents | Top

Float Drops

The float drop bug occurs when the contents of a floated container exceed the specified width of the container. In Firefox, IE7 and other browsers, the contents will merely be cut off, but in Internet Explorer 6, the container will ignore its specified dimensions and expand to accomodate the contents. If any other elements have been floated next to the container, they will then drop below it.

The Float Drop Bug is one IE6 error for which there is no real satisfactory solution, at least that I could find. It can be skirted using overflow:hidden; or overflow:scroll;, but the hidden value presents accessibility issues and the scroll value can ruin the layout. Even JavaScript fixes don't seem to be useful in mitigating the problem. The best solution that I can suggest is to avoid the problem altogether, either by using a fixed layout or being extremely conscious of the size of your content.

Further Reading

Contents | Top

The Guillotine Bug

The Guillotine Bug is a particularly frustrating IE6 (and IE7) bug. It truncates or guillotines content in a floated and non-cleared element that is larger than its container element whenever links with different hover styles with non-floated content after the float are moused over. Sound confusing? Don't worry, this bug and its fix are once again well-documented by the folks at Position Is Everything.

Despite the complicated triggers for the bug, the solutions are fairly simple. The first involves adding an additional element at the bottom of the container and setting that element to clear:both;. The second fix is to trigger hasLayout in the element containing the links that enable the guillotine effect. This can be done by simply adding a height:1%; declaration.

Further Reading

Contents | Top

1px Gap Bug For Absolutely Positioned Elements

This bug occurs in IE6 (IE7 fixes it) because of a rounding error. IE6 will include a 1-pixel gap on the right or bottom edge between an absolutely-positioned element and its relatively-positioned parent if the parent's dimension is an odd number. The only real fix for this is to specify even heights and widths for the parent element. Sadly, there isn't really a solution for fluid layouts. Paul O'Brien explains the problem in further detail here.

Contents | Top

3px Gap Float Bug

Also called the 3px text jog bug, this bug occurs in IE6 when text is abutted next to a floated element. IE6 will add a 3px margin between the element and the text, even if none is specified. Stu Nichols has a particularly elegant solution to the problem.

Contents | Top

IE And The z-index Property

If you're using the z-index property on positioned elements in Internet Explorer 6 or 7, the stacking index will reset to zero, causing a rendering error. The solution, pointed out by a person named baker, is to add a higher z-index to the parent element. In some cases, the parent element may also need to be assigned position:relative.

Further Reading

Contents | Top

Overflow Bug

Jonathan Snook documents and solves the overflow bug, which occurs when the overflow property is set on a containing element and there is a relatively-positioned child for which the height is greater than that of the parent. In both IE6 and IE7, instead of following the overflow declaration, the larger child element will spill out past its parent. The solution? Add position:relative to the container.

Contents | Top

Lists

Unsurprisingly, there are a number of IE-specific bugs that affect lists. Here are a few of those bugs and their fixes.

Contents | Top

Horizontal List Item Width Problem

If you're trying to float list items to form a horizontal menu, if you've applied the float the <li> element, you'll find that each menu item will annoyingly stretch to 100% of the width of the containing element, making the menu items stack vertically rather than horizontally. Again, this problem occurs only in IE6. The solution? Thanks to Rofikul Islam Shahin, it's easy. Just apply float:left; to the <a> as well as the <li> and your menu should display the way it should.

Contents | Top

Staircase Bug

The Staircase Bug occurs when the contents of <li> elements are floated in an attempt to create a horizontal list (often used for navigation). Each item will either appear vertically stacked, or will float in a staircase pattern.

The solution? There are two: apply the float to the <li> instead, or apply display:inline; to the <li> element.

Contents | Top

Vertical Spacing or Whitespace Bug

When creating a vertical list that has<li> elements with block-level children, Internet Explorer 6 (and perhaps some cases of IE7) will erroneously add vertical spacing between the list items. There are multiple solutions for this, but let's take a quick look at an example first.

Sample HTML

<ul>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
</ul>

Sample CSS

ul {margin:0; padding:0; list-style:none;}
li a {display:block; padding:0.5em; background:#ddd;}

The Fixes

Jon Hicks is credited with one fix that involves floating and clearing the anchor tags in the list.

ul {margin:0; padding:0; list-style:none;}
li a {display:block; padding:0.5em; background:#ddd; float:left; clear:left;}

Another option is to trigger hasLayout by specifying either a specific height or width on the anchor tags (or any block-level children).

ul {margin:0; padding:0; list-style:none;}
li a {display:block; padding:0.5em; background:#ddd; width:100%;}
/* height:1%; also works here */

The <li> element can also be assigned the display:inline; declaration.

li {display:inline;}

Another interesting fix involves putting a space between the last character of text in the block-level child and the closing tag.

<ul>
	<li><a href="#">Item 1 </a></li>
	<li><a href="#">Item 2 </a></li>
	<li><a href="#">Item 3 </a></li>
</ul>

Further Fixes and Explanations

Contents | Top

Behavior

As in many other scenarios, IE6 has problems in how it behaves. Some behavioral issues occur because IE6 is old, because it doesn't fully support CSS2, because it doesn't support CSS3 at all, or because Microsoft simply decided to follow a proprietary standard.

Let's look at some of the more common behavioral problems with Internet Explorer 6.

Contents | Top

No Hover State In IE6

There is no IE6 support for a hover state of any element except anchor tags with the href attribute or elements for which such an anchor tag acts as a container. This severely inhibits the usage of any mouseover effects in IE6, but there are a few ways around it.

The best approach is to not rely on the hover property for conveying mission-critical functionality. Instead, use it only to accent or enhance an already functional and accessible feature.

Most IE6 hover fixes will use either Microsoft's proprietary CSS behavior property or a JavaScript solution, usually through a JavaScript Framework or a IE6 fix script.

Contents | Top

Implementing The Canvas Tag In IE

No version of Internet Explorer (including IE7 and IE8) supports the HTML5 canvas tag because Microsoft favors pushing its own option, VML, instead. However, there are several JavaScript solutions that emulate the canvas tag for IE.

Canvas Fixes and Resources

Contents | Top

IE6 Resize Bug

Emil Stenström discovered and found a solution to the IE6 Resize Bug. Basically, on a page where the body element is centered and the layout is fixed, any relatively-positioned elements within it will become fixed if the page is resized but not refreshed. Emil's solution was simple and elegant: add position:relative; to the body.

Contents | Top

JavaScript

Internet Explorer 6 also suffers from a myriad of errors while trying to interpret JavaScript. I won't be able to cover each and every IE6 JavaScript bug, but I'll address a few of the more common occurences and what you can do to fix them.

Contents | Top

Error: Expected Identifier, String, Or Number

Internet Explorer isn't known for being tolerant of poorly-formed JavaScript and it will often give the error, "Expected Identifier, String, Or Number" if a trailing comma is found after the last item in an array or hash. Other browsers are more forgiving, but by removing the comma, you can usually get rid of this error.

Contents | Top

IE JavaScript Memory Leaks

Because Internet Explorer uses its own memory manager, it can be subject a memory leak as it fails to reclaim memory when interacting with JavaScript. Douglas Crockford has an excellent write-up on preventing JavaScript memory leaks in Internet Explorer. Another page on the topic, written by Hedger Wang is also worth noting.

Contents | Top

Miscellaneous

This section is dedicated to a few of the miscellaneous Internet Explorer 6 bugs and fixes that don't fit neatly into one of the other categories.

Contents | Top

Duplicate Characters Bug

When IE6 encounters any sort of hidden elements such as a comment or an element set to display:none; within a floated element, it may duplicate characters. The problem is nicely detailed at Position Is Everything, but the solution seems simple enough: apply display:inline; to the float that precedes the hidden elements.

Contents | Top

Favicons in IE

Favicon is short for Favorites Icon and refers to the 16x16 pixel image that appears next to any page that you bookmark in your favorites folder. There are two methods for getting it to appear. The first is simply to save an image called favicon.ico in the root directory of your website. Internet Explorer and other browsers should automatically look for the image and display it. The second method is to place the following code in the head of your HTML document (after uploading your image):

<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />

It should be noted that the favicon image can become cached and may not change unless you empty your browser's cache and refresh one or more times. If you would like to have it update automatically for your users, set the expires header on the image.

Further Reading

Contents | Top

GZip In IE6

Some versions of IE6 prior to the XP SP2 update may have trouble with files that have been served using GZip compression. Fortunately, Seb Duggan found a IE6 GZip bug solution using ISAPI_Rewrite for Apache.

Seb's solution is to place the following code in the httpd.conf file in the ISAPI_Rewrite installation directory:

RewriteEngine on

RewriteCond %{HTTP:User-Agent} MSIE\ [56]
RewriteCond %{HTTP:User-Agent} !SV1
RewriteCond %{REQUEST_URI} \.(css|js)$
RewriteHeader Accept-Encoding: .* $1

Contents | Top

Bonus Resources

Although this has been a long list of Internet Explorer 6 bugs and fixes, it's hardly exhaustive. If you weren't able to find what you were looking for above, check out these additional resources.

原文地址

评论