IE Problems - Khai's personal knowledge vault.

IE Problems

http://robertnyman.com/2008/01/22/cant-make-links-appear-clickable-in-ie/
http://www.sitepoint.com/web-foundations/internet-explorer-haslayout-property/
http://www.satzansatz.de/cssd/onhavinglayout.html
http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
http://www.bennadel.com/blog/1354-the-power-of-zoom---fixing-css-issues-in-internet-explorer.htm
http://stackoverflow.com/questions/591870/triggering-haslayout-in-ie-6-whats-the-side-effect-of-using-html-div-heigh
http://www.nickstark.com/?p=211
http://css-class.com/articles/explorer/guillotine/

Problem with scrollbar not displayed even when the element has more content than it can contain:

I was in a situation where I need to do a lot of DOM manipulation (changing the size of various elements within a page). The body element was assigned a specific height and width, and has overflow set to auto. I was inside an iframe… I was also dealing with compatibility-view enabled, and I guess changing size for a few elements one after another cause IE to go crazy, so the body element behave as though it has overflow set to hidden. To deal with this problem, I had to force IE to re-render:

bodyDom.style.zoom = undefined;
bodyDom.style.zoom = 1;

I already had zoom set to 1 on the body element.

Problem with innerHTML returning tag names in uppercase or lowercase:

When we use innerHTML to retrieve the HTML content of an element, IE8 returns a string consisting of tag names that are uppercased, and other version of IE return a string consisting of tag names in lowercase. We should not have any code that is dependent on how the browser behave. We should the official way to manipulate the DOM such as using appendChild rather than doing string manipulation. So, this may not be strictly a problem with IE, but this is an inconsistency between different version of IE nonetheless.

Problem with position:fixed.

IE6 does not have support for position:fixed. Other version of IE, when using compatibility view, does not support position:fixed either.

You can simulate position:fixed using javascript. Instead of using CSS expression, use some sort of onscroll handler and instead of using position:fixed, change it to position:absolute, and position the element by setting its top property. Register these elements in an array, and then the onscroll handler move these elements as the page is scrolled. We may need to remember the position of each elements, or the previous scroll position. The onscroll handler remembers the previous scroll position, compute the delta, and apply the delta to these elements.

Eric Bednarz has found a pure CSS solution to this problem, but technically it can be tricky. For instance, when you use his fix you cannot use position: absolute normally. Read his page well if you want to implement his solution.

See Simulating fixed positioning in IE6

Problem with disappearing background:

If an element has position:absolute or if all of its children are floated. One way to workaround this problem is by setting overflow:auto. This is not an IE-specific problem.

Problem with loosing session cookie:

See http://stackoverflow.com/questions/1324181/ie8-losing-session-cookies-in-popup-windows

Problem with printing:

See IE Printing

Problem with transparent background:

IE does not support transparent background by default. See IE Transparent Background

Problem with transparent image:

IE does not support transparent images. See IE Transparent Images

Problem with the select field always appear on top:

The 'select' element always appear above all other content by default, regardless of z-index. Their stack level can't be changed. Use iframe shim. The iframe shim works for the 'select' element, and most kind of embedded media content (flash)

Problem with flash content always appear on top:

Flash content will display above all other content by default, regardless of z-index. To work around this, explicitly set the flash window-mode to the default option of 'opaque', or use the iframe shim. The iframe shim works for the 'select' element, and most kind of embedded media content (flash)

Problem with certain elements disappears when you interact with something on the page (we cannot position something over certain elements):

I was using the coolframe menu system. When I mouseover a menu, my select elements disappear. The coolframe menu hide the select elements because the select element is special. Later version of the coolframe menu use the iframe hack(put an iframe on top of the select element), but it still appears as though the select element somehow disappeared. Actually, this is related to the select element being displayed on top. We had some code that hide the select element as a workaround instead of using the iframe shim. This problem in particular, element disappearing, is not a problem with IE. However, if you encounter something like this, check the folowing options:

make sure that the select elements are not in the way of the menu
do not use the normal select element (use a jQuery plugin or another javascript library / plugins that simulate the select element)
only use the iframe shim if we need to hide the select element (we need to determine which select elements need to be hidden based on their position)

Problem with scrollbar not displayed:

See No scroll bar

Problem with child selector (>), adjacent sibling selector (+), and attribute selector (p[class]):

Some version of IE does not support the child selector (>), the adjacent sibling selector (+) and the attribute selector (p[class]).

Problem with pseudo selector:

Some version of IE do not support the :focus and :first-child pseudo-classes.

Problem with background-attachment:fixed:

Some version of IE does not support the W3C definition of background-attachment:fixed on elements other than the <body>.

Problem with min-height and min-width:

Some version of IE do not support min-height and min-width. IE6 does support min-height declaration on <td>s in tables with table-layout: fixed (which, in turn, is not supported by any other browser). IE 6 does not support min-height and min-width. Fortunately, IE 6 treats the regular height property like modern browsers treat min-height.

Min-height is incredibly useful for something like a footer. Say your footer needs to be at least 100px tall because you are using a background image down there, but you don’t want to set a static height because you want it to grow nicely if, say, the text size is bumped up significantly. Min-height is perfect for this, but using it alone will get you no height whatsoever from IE 6. In a bizarre twist of luck, IE 6 treats the regular height property like modern browsers treat min-height. See also Maximum and Minimum Width Solution for All Browsers

Problem with max-height and max-width:

IE 6 does not support max-height and max-width. See max-width in Internet Explorer and Maximum and Minimum Width Solution for All Browsers

Problem with involuntarily stepdown:

IE 6 involuntarily cause "stepdown" on floated block element. Normally when floating objects you can count on them lining up vertically until they run out of horizontal space, at which point, the floated elements will wrap / stepdown. IE 6, however, appends a line break effect after each floated block element which will cause involuntarily “stepdown”. The fix is to make sure the line-height in the parent element is set to zero (0), or that the elements being floated are inline elements. See preventing stepdown. If this does not work, try setting zoom:1 on the parent element

Problem with hover state:

IE 6 does not support hover state. IE 6 only support the hover pseudo-class on anchor (<a>) elements, and even then you don’t get them if your anchor doesn’t have a href attribute. The solution here is to wrap the element in an anchor (<a>) tag, use a proprietary fix, or just deal with not having hover states on everything you want.

Problem with determining the element size:

For IE (without a doctype), the declared height and width does include padding and border.

Problem with a div that has position:absolute acquires display:inline:

A div with position:absolute acquires display:inline. To get around this issue, always explicitly set the position of the div using either (top, left), or (bottom, right), or try adding zoom:1

Problem with floated inline element.

Floated elements, by their nature, are block-level elements. Therefore, this is not a problem with IE. This is a problem with your code. Either change the element to block-level elements, or consider using absolute positioning.

Problem with in-ability to have very small height.

I ran into this problem when I was trying to create a line going across the page using a DIV. This did not work for IE6, and so I had to use the <hr> element which looks thicker than I wanted. IE simply refuses to size an element smaller than the set font size. Simply setting the font size to 0 lets you have an element as small and short as you like:

  #element{  
     border: solid 1px #36F;  
     height: 1px;  
     font-size: 0;  
 }

Another way to deal with this problem is to set overflow:hidden so it collapses to the intended height.

Problem with position:relative elements overflowing its container.

This bug rears its ugly head when in a layout you set the parent container’s overflow property to auto and place a relatively positioned item inside it. The relatively positioned item violates its parent element’s boundaries and overflows outside. The easiest way to fix this annoying bug is to just position the parent element relatively too.

Problem with space between list items.

IE 6 adds vertical spacing even none is specified. See the last bug on 9 Most Common IE Bugs and How to Fix Them for detail. An easy solution is to float the list items left, and clear left:

float:left;
clear:left;

Problem with floated elements and overflowed content.

If you've got two floated elements and the content from the left container overflows then, in IE, the container grows and inevitably pushes the right container below it. This is usually a sign that you've messed up your margins, widths, or padding on one of these containers but Firefox (et al) won't reveal this. Using something like overflow:hidden or overflow:scroll on a container can help prevent IE from allowing the content to push the width of the container but you're better off trying to fix the issue in the design. http://www.snook.ca/archives/html_and_css/top_css_tips/

Problem with IE6 displaying blank page if the page specify a character set UTF8:

If a page specify a character set UTF8 via a meta tag (the page has a valid DOCTYPE), IE6 will display a blank page. This problem may also be caused by the no-cache meta tag.

Problem with missing borders.

Sometimes, the solution will consist of adding a margin, just for IE, around the box that has the border, or around the parent element, or making the element behave like an inline-block:

*display: inline;
*zoom: 1;

Problem with iframe having empty src:

In-experience users, as well as experience user, sometimes by mistake, create iframe without specifying the src attribute, intending to set it later. If you are in an HTTPS environment, IE will produce a warning. To avoid this, set the src attribute to "#" or "javascript:void(0);"

Problem with img having empty src:

In-experience users, as well as experience user, sometimes by mistake, create img without specifying the src attribute, intending to set it later. When this happens, some browsers will fetch the page containing the image again, then stop (because it realize that it can't render HTML as image). This cause extra load on the server, and some race condition.

Problem with "margin: 0 auto":

IE when using compatibility view will not work with "margin: 0 auto". It will not center the element. However, it will center the element if the parent element has "text-align: center".

The box model problem:

Explorer 5 for Windows does not support the W3C box model. Explorer 6 does, but only in Strict mode. In W3C box model, when we declare the width of an element, we are declaring the width for its content area. This does not include border, and padding.** In IE box model, when we declare the width of an element, we are declaring the width of the entire element. This include the width of the content area, border and padding. The fix (most of the time) is to include proper DOCTYPE. If that does not work (for example, you have to support IE 5.5), then use the simplified box model hack (the Tan hack, named after Edwardson Tan):

* html div {  /* This is the Tan hack */
  width: 130px;
  w\idth: 100px;
}

The star at the beginning of the selector is the universal selector, which applies to all elements. "html" is supposed to be the root element. All versions of Internet Explorer seem to believe that there is a mysterious "wrapper" element surrounding "html". The selector in question (* html div { }) picks out any div that is enclosed (however deeply) inside "html", if "html" is enclosed in any element whatsoever. IE thinks that the star refers to this "wrapper", and then sees that yes indeed, "html" is enclosed inside it. Only IE believes this condition exists.

However, all other browsers see "html" as the true "root" element, and so the star can't refer to any real element. This causes all non-IE browsers to ignore all rules following that selector. Thus, the entire Tan hack is totally invisible to all browsers except Internet Explorer.

In the hack selector, the star and "html" parts are required, but the div I gave as an example would, in practice, be replaced by the element to be targeted. Instead of "div", it could be "p", "ul", ".myclass", or whatever you need. It is best to be as specific as possible in order to target only those elements that require different values.

The w\idth: 100px; is for IE6 and IE5.5 on mac. It turns out that IE5.x/win cannot handle any property name having such an escape within it, but IE6 and IE5/mac correctly ignore the escape.

The escape character must be inside the property name (whatever that may be), and it must not come just before any of the first six alphabetical characters, meaning: a, b, c, d, e, or f. If this is done it will be interpreted as a "hex" character, messing up the hack. Luckily, all property names have at least one suitably "escapable" character.

The Tan hack does its job well and won't cause trouble for with version 5 and above browsers, but IE4.5/mac may have trouble with it. You will need to test to be sure.

If IE6 is in quirks mode it will be using the old box model, and will need the same "width" value that IE5.x/win does. However, IE6 will still not be fooled by the escape, and will read the escaped value, thus defeating the hack, and rendering a smaller than desired box. Make sure the doctype you use puts IE6 in "standards" mode.

If your page must be in "quirks" mode for some reason, doing something different with the Tan hack may be necessary. First, the Tan hack is modified by removing the second value (the one with the escape in it). That way IE6 gets the same value as IE5.x/win. But now IE5/mac (which does not go into "quirks" mode) will also use that value, and get it wrong. So, to hide the Tan hack from IE5/mac, do the following:

div {
    width: 100px;
    padding: 10px;
    border: 5px solid black;
    margin: 10px;
}

/* A CSS comment before the hack \*/
* html div {
    width: 130px; 
}
/* Another CSS comment after the hack */

Look at the top comment. See that escape just before the closing tag? Because of that escape, IE5/mac fails to recognize the closing tag, and so fails to read the entire Tan hack. The second comment below the hack provides a closing tag for IE5/mac's benefit. In this way, IE5/mac reads only the value in the normal code block before the hack. This Mac hack, called the Commented Backslash hack, was discovered by Sam Foster. Version 2, the one we're using here, was suggested by James Craig.

For detail explanation of the Tan hack, refer to The Box Model Problem

Problem with the xml prolog:

Using an <?xml…?> declaration at the top of the document, while recommended for some doctypes, will wrongly throw IE6 into "quirks" mode. It is not required, so be careful if you use the declaration, and test thoroughly! (See the Rendering Mode and Doctype Switching article at CMX for more on this topic.)

Problem with double margin:

Let’s say we need that floated to the right, IE 6 will double its margin. The commonly thrown-around “fix” for this is to add “display: inline;” to the div. Side-step this bug whenever possible. If you really need to push that box away from the right side of it’s parent element, you can likely do so by adding padding to the parent element. This bug does not affect padding, so you can offen get away with adding padding to the side you need an achieve the same result. "display:inline" only causes IE6 to not double the margins, the elements are still rendered as blocks – it’s a bug to fix a bug. "display: inline-block" also works. It basically combines both inline and block displays, meaning the element is still inline, while allowing the block level style of padding, fixed width, and such. “display: inline;” works to eliminate the double-margin bug because floated elements, by their nature, are block-level elements. doesn’t matter if “display: inline” is applied to that element. modern browsers simply ignore such non-sense, but ie 6 understands it. Also, all floated elements should have a declared width.

IE6 incorrectly trigger the onresize event handler.

See http://blog.stchur.com/2006/09/06/the-ie-resize-bug-revisited/

IE6 has an issue with Flash and HTTPS:

(no-cache headers are used): http://kb2.adobe.com/cps/000/fdc7b5c.html

IE6 cannot deal with compress content

DOCTYPE does not work with document.body.clientHeight:.

See Get viewport size (width and height) with javascript, and Why DOCTYPE affects document.body.clientHeight

DOCTYPE does not work with document.body.scrollTop or element.scrollTop:

This is the same issue with document.body.clientHeight. Use document.documentElement.scrollTop instead. Also, scrollTop only seem to work on elements for which overflow is declared.

Problem with checkboxes displayed out-of-place when they are inside a ul element:

This is specific to IE-7. To work around this issue, assign position:relative on the ul element.

Problem with text-indent:

Do not use text-ident. Use margin, padding, or border to achieve the same effect.

Problem with xml prolog:

Avoid the unnecessary xml prolog. If you include the xml prolog:

<?xml version="1.0"?>

then IE6/Windows uses the quirky box model. Since the xml prolog is unnecessary, omit it.

IE6 collapse block level element if we do not define height, but we define overflow (either auto or hidden or whatever):

Use "zoom: 1" in your ie6.css

IE triggers HTTPS warning:

This happens if:

we have an iframe or an img tag that we forget to specify the src attribute.
we have CSS background null

IE6 does not understand attribute selector.

And if we combine selectors, the attribute selector break other selectors as well.

IE6 and 7 only support inline-block for elements that are natively inline.

Luckily, in IE, elements that have layout and are inline behave as inline-block elements. The initial value for vertical-align is baseline. If you want your blocks to be vertically aligned on their center, use vertical-align:middle.

Invalid argument.

Here are the known causes of this frustrating error:

If a DOM attribute is of type number, say colspan, then setting colspan="something" (or more exactly myTd.colSpan = "something") cause this error.

Problem with JSON object. Given a JSON object:

{
    name1: value1,
    name2: value2,
    name3: value3,
}

IE will results in a javascript error. This JSON object works fine Firefox. If you use SpiderMonkey to check the syntax, SpiderMonkey does not detect this as error.

Problem with downloading files:

If you get the message:

Internet Explorer cannot download ... Internet Explorer was not able to open this Internet site.  The requested site is either unavailable or cannot be found.  Please try again later.

then search the Internet for:

Internet Explorer Content-Disposition
HTTP RFC Content-Disposition
IE problem downloading files Internet Explorer cannot download … Internet Explorer was not able to open this Internet site. The requested site is either unavailable or cannot be found. Please try again later.