Internet Explorer 8

Navigation

Skip navigation.

Site search

Site navigation

• How To Create home

Internet Explorer 8

Details of the changes

The Internet Explorer 8 is out, and clearly there have been some big advances since IE 7. Sadly there have also been some major oversights, but more on those later.

The advances have mostly been in the CSS support, which has actually moved IE forward towards the other browsers. It has made a substantial advance through CSS 2.1, though is still behind the others in terms of CSS 3.

Unfortunately, there are almost no advances at all in DOM support, and IE remains nearly a decade behind the other browsers. Important DOM modules like DOM 2 Style, DOM 2 Events, and DOM 3 XPath have been ignored. The DOM support is basically just as bad as it was in IE 7. The updates are not really worthy of mention next to the missing parts that Web developers are still in desperate need of.

The main changes are as follows:

• CSS 2.1 (screen and print) is now mostly supported.
  • Acid 2 passes (in Beta 1 it passes on the webstandards.org site, but fails on its new home at the acidtests.org site, although this is not related to CSS).
  • Generated content.
  • Counters.
  • Outline.
  • Table display and other table-related styles (border-spacing, etc.).
  • @page rules and improved page-break styles.
  • display: inline-block now works on all elements.
  • list-style now supports all possible values from CSS 2.1, as well as upper-greek from CSS 3.
  • white-space now also supports pre-wrap and pre-line.
  • :focus now works.
• The infamous hasLayout bug has gone. (In betas 1 and 2, this also means that filters that relied on it no longer work, including opacity - they work again since IE 8 RC 1.)
• Margin collapsing works better.
• Floats now work almost correctly (most float bugs related to hasLayout), though overflow bugs still exist.
• CSS 3 box sizing (called -ms-box-sizing) and vertical text are supported (vertical text was always supported, but now it is in CSS 3).
• A few elements got new default styles, such as fieldsets having a 1.2em top margin instead of auto, and headings having font-size specified in relative units.
• Tables and replaced elements (like images) with align="left" or align="right" no longer cause strange overlaps, and now behave more like regular floats.
• <button> element type now correctly defaults to "submit".
• <button> values are now correctly submitted instead of their innerHTML.
• Object fallback now works almost completely, but still has a few problems with resources from other Web sites.
• Data URIs partially supported, but limited to images and linked resources like CSS files, not HTML files. Max URI length is 32KB.
• Alternate sylesheets are now natively supported.
• Table tags now correctly implicitly close paragraph tags.
• Cludged namespace support in HTML instead of proper XHTML support.
• hasAttribute now exists.
• getAttribute and setAttribute now work correctly with previously special attributes like HREF, STYLE and CHECKED.
• getAttribute now returns an empty string for unspecified attributes - this is spec compliant but the spec is incompatible with every other implementation.
• ownerElement and ownerDocument now exist.
• Dynamically created radio buttons now work properly.
• Selectors API support.
• Support for getters and setters using a syntax based on an ECMAScript 3.1 draft, that is completely incompatible with all other browsers.
• Fixed memory leaks (this means that scripts no longer need to remove event handlers onunload).
• getElementById no longer returns elements whose NAME attribute matches.
• Proprietary cross domain XMLHttpRequest called XDomainRequest.
• Cross document messaging.
• hashchanged events.
• Client side storage.
• Connectivity events.
• More proprietary XMLHttpRequest stuff.
• Support for proprietary CSS expressions has been removed in standards mode.

Generated content uses only the single colon syntax from CSS 2, not the double colon syntax from CSS 3 that all other browsers also support.

There is also a way to make IE 8 break standards and revert to IE 7's archaic and broken rendering (it has several small differences when compared against a real IE 7 install). I condemn any use of this, since it harms standards and knowingly causes problems for other browsers, as it implies they can replicate all of IE's bug-ridden versions. It is a sign of lazy development and is simply a way to show that your own knowledge of standards is so poorly lacking, you should not be making Web pages. If you are only here to learn how to use that mode, then you are in the wrong place; this site tries to help people to write pages properly.

Regressions

There are also several regressions since IE 7 that cause problems with the display of various pages. These are the regressions I have found so far that cause display problems on this site, and a few others that I help maintain.

The following regressions are present in IE 8 final:

• Min-width on new block formatting context beside a float is sometimes treated as width (IE 7 was the only major browser to ever get this right - see the testcase comments for details).
• Percentage width floats cause justified text to move.
• Max-width fails on floats with auto overflow. (Credits to Hilbrand Edskes for making me aware of this issue.)
• Scrollbar height is added onto max-height instead of subtracted from it. (Credits to Hilbrand Edskes for making me aware of this issue.)
• Max-height acts as height on elements with scrollbars.
• Combining max-height, float and overflow:scroll will cause the entire page to disappear (normally, it will automatically reload the page with the IE 7 engine to allow it to display again). (Credits to Hilbrand Edskes for making me aware of this issue.)

The following regressions have been fixed in IE 8 final:

• Blocks inside floated list items are displaced from their correct position.
• Underline fails on the last line of monospace text after a float that produces a scrollbar.
• Textareas inside new block formatting contexts inside tables get confused between CSS width and HTML COLS attributes when subsequent content is reflowed.

The following regressions have been fixed in IE 8 RC 1:

• The text-overflow style no longer works. (Credits to PPK for making me aware of this issue.)
• Since IE 8 beta 2, the double colon syntax used by CSS generated content causes media blocks to be closed too early - this has a devastating effect of causing random CSS rules to be incorrectly applied (on this site, it causes the navigation to disappear).
• Multiple output buffer flushes inside a block element can cause remaining content in the element to disappear. This is an extremely serious bug that can make random parts of Web pages disappear, sometimes even the entire page.
• Float on an inline element, followed by absolute position on an inline element, can cause the entire page to disappear.
• The width of scollable elements is miscalculated beside floats. (Credits to Rustam for making me aware of this issue.)
• It cannot scroll to named anchors (<a name="foo">) if they are created with the <a> tag using NAME or ID.
• The body element gets a pointless blank gap under it, whenever the horizontal scrollbar is not showing.
• Table cells with rowspan are too high, depending on sibling height.
• Reflow inside a scrollable positioned element resets the scrolling to 0.
• It no longer fires resize events when the window is resized.
• The cursor:url style no longer works.

The following regressions have been fixed in IE 8 beta 2:

• It does not allow multiple colour values to be specified using rgb() syntax in the same style value, such as:

  border-color: rgb(100,100,100) rgb(200,200,200);

• OL list numbering is wrong when DOM modifies the document.
• Padding on the HTML element is ignored.
• The clear style fails when applied to the otherwise empty parent of a float.
• Elements that have a border as well as display:table incorrectly receive two borders and padding, one on the element, and one on the anonymous table cell (which should not receive a border or padding).
• Block elements inside inline elements now get a pointless blank gap above them if an ancestor has specified padding.
• Empty inline elements also produce a pointless blank gap if an ancestor has specified padding.
• Block elements no longer detect hover or click unless the mouse is over some text within them (this is an old bug that got mostly fixed in IE 7 and broken again in IE 8).
• Legend elements are misplaced inside their fieldsets.
• A combination of positioned elements, form buttons, list items, and inline blocks can cause the list markers (bullets or numbers) to be duplicated. There are several variations, including block elements with padding or borders inside list items.
• Different input types are no longer aligned correctly.
• Hidden overflow on a relatively positioned container fails to affect absolutely positioned children.
• The :first-line pseudo-element no longer works.
• The :first-letter pseudo-element no longer works.
• The letter-spacing style no longer works.
• The word-spacing style no longer works.
• Elements with table-cell display apply margins even though they are supposed to ignore them.
• Vertical-align:middle no longer works with images. The same applies to align="middle".
• Negative text indents can make content disappear.
• Elements inside links no longer inherit the correct cursor from the link.
• Scrollbars created using overflow no longer work on floated elements. (Credits to css-class.com for making me aware of this issue.)
• Empty CSS rules cause the next rule to be dropped if the empty rule follows an import rule in the CSS. (Credits to css-class.com for making me aware of this issue.)
• The 1px top/bottom borders of inline elements and top/bottom padding of inline elements are not drawn if they are larger than the line-height of the parent element. (Credits to gtalbot.org for making me aware of this issue.)
• Scripts that cause layout of nested tables to be calculated before parsing is complete can cause the table to lay out incorrectly (it assumes the following content does not exist).
• Animated gifs fail to animate if they have specified height or width.
• Table DOM collections tBodies[] rows[] and cells[] throw errors if you try to use them.
• DOM attributes collections throw errors when checking their length.
• scrollTop and scrollLeft are always 0 for overflowing elements, instead of the actual scrolling offset.
• scrollHeight and scrollWidth give the same values as clientHeight and clientWidth instead of the actual scrollable area for overflowing elements.
• Positioned elements cause the body's clientWidth and clientHeight to be measured as 0.
• Reading a node value then removing options can make the page go blank if the select input is wider than the content that follows it. (Credits to PPK for making me aware of this issue.)

Running IE 8 and IE 7 on the same computer

The IE 8 install overwrites the IE 7 install (though apparently it can be uninstalled). While it is possible to use the IE 3-6 packages, a package for IE 7 is not yet available. IE 8 RC 1 has a menu item and button "Compatibility view" to switch it into IE 7 mode, which is close to a real IE 7 install, but not perfect. A few of the IE 8 script properties still exist, and a few little CSS differences are present. Still, it is not a bad approximation. For now, this is the best approach. Be warned that the IE 3-6 packages have problems with text inputs when IE 8 is installed - they cannot be typed into, or have their contents changed.

Alternatively, there is IETester, which provides IE 5.5-8, and seems much more reliable. It also uses a real IE 7 install, and therefore does not have the IE 8 properties that appear in IE 8's IE 7 compatibility mode.