Internet Explorer 8

Navigation

Skip navigation.

Site search

Site navigation

• How To Create home

Internet Explorer 8

Details of the changes

The first Internet Explorer 8 beta is out (make sure you disable any add-on toolbars before you run it or it can crash), 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 (on the webstandards.org site, but fails on its new home at the acidtests.org site, although this is not related to CSS).
  • Partial 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. (This also means that filters that relied on it no longer work, including opacity.)
• Margin collapsing works better.
• Floats now work almost correctly (most float bugs related to hasLayout), though clearance 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.
• 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.
• 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.

Generated content support is sadly lacking, as it does not support images, either as content, or as a background. This removes most of the possibilities of generated content. Note that is uses only the single colon syntax from CSS 2, not the double colon syntax from CSS 3 that all other browsers also support. It also does not support generated quotes.

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

• 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.
• It cannot scroll to named anchors (<a name="foo">) if they are created with the <a> tag using NAME or ID.
• 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.
• The text-overflow style no longer works. (Credits to PPK for making me aware of this issue.)
• 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".
• Reflow inside a scrollable positioned element resets the scrolling to 0.
• 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.)
• Underline fails on the last line of monospace text after a float that produces a scrollbar.
• 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.)

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.

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. Currently, IE 8 beta 1 has a button on the toolbar 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.