I'm writing a CSS book
JavaScript archives Compatibility Thidrekssaga QuirksBlog Donations CSS book Politics Mobile About COH
QuirksMode
PPK contact

IE8 beta 1 - first tests

As everybody and his dog know by now, Microsoft has made IE8 beta 1 available. First impression: decent progress, but a lot of work remains to be done. And, in all fairness, this is merely a first beta, and its main purpose is to show where Microsoft is headed, and not to get every little thing right on the first try.

There's a lot to be said about its CSS and JavaScript support, and I'm going to say it all. My readers, as well as the IE team, expect that.

Regressions

I'm going to start with a (doubtlessly incomplete) list of regressions: stuff that works in IE7 but not in IE8:

  1. <ol> numbering may be wildly and weirdly off; see the Core Table index, for instance.
  2. scrollTop and scrollHeight are off (test page). Still have to determine how much off and if there's any rule.
  3. :first-line and :first-letter don't work.
  4. The attributes[] array doesn't seem to have a length.
  5. The cells[] and rows[] nodeLists don't work.
  6. letter-spacing doesn't work in this page. (The test is about the tag[customAttribute] selector, which works fine.)
  7. Opacity doesn't seem to be supported (unless there's some odd syntax; I tried -ms-opacity, but that doesn't work, either).
  8. A really minor one: Some CSS selectors, such as the + selector, should also work when the page content is changed by JavaScript. In IE8 they do, but only after you remove the focus from the link that changed the page content.

Wrapper script problem

Yesterday I went through my tests cases and found the problems listed above. However, in at least one case the problem was caused not by IE8, but by my DOM test page wrapper script (although that problem, in turn, may be caused by IE8, since the wrapper script works fine in all other browsers, including IE5.5, 6 and 7).

When going through the Core table, the first thing I noticed is that insertBefore() didn't work. I couldn't believe that the IE team would overlook a serious bug in such an important method and created a simple test case that was independent of my wrapper script. Result: insertBefore() works fine.

One more thing to take care of. Maybe I've been too smart in creating that wrapper script, although it works fine in all other browsers from 2006 onward.

I retested all of the problems listed above separately, and they're independent of my wrapper script.

New CSS

The IE team wants IE8 to fully support CSS 2.1 . Right now, that means that the following bits of CSS have been added (and I only tested those declarations I have tests for, so this list is definitely incomplete):

  1. :before and :after are supported, but you can't specify images, only text.
  2. :focus is supported.
  3. display: inline-block is fully supported (used to be only on natural inline elements).
  4. display: table and friends are supported.
  5. list-style support now complete, including the upper-greek value that no other browser supports.
  6. outline supported.
  7. border-collapse, border-spacing and caption-side supported (test page).
  8. white-space fully supported (used to be only two values).
  9. box-sizing is supported, but it's -ms-box-sizing.

New JavaScript

John Resig and Erik Arvidsson have already discussed IE8's JavaScript updates in detail, so I won't bother to repeat their lists.

And no, the W3C event model is not supported, and yes, I told the IE team what you think of that omission.

This is the blog of Peter-Paul Koch, web developer, consultant, and trainer. You can also follow him on Twitter or Mastodon.
Atom RSS

If you like this blog, why not donate a little bit of money to help me pay my bills?

Categories:

Comments

Comments are closed.

1 Posted by Borgar on 8 March 2008 | Permalink

There is some weirdness going on with quotes. I've not done extensive tests but the beta seems to dislike "content:open-quote;"

I seem to recall seeing somewhere that list-style as image fails as well.

This plus the ol issue, and content:url(); seems to suggest that content generation still needs some polishing. Fingers crossed.

2 Posted by Brian LePore on 8 March 2008 | Permalink

While I've not created a simplified test to verify, my initial tests concur with Borgar's statement that list-style as images fail.

Inheritance rules also display oddly with respect to lists. I've sublists set to display none where the bullet (which was supposed to be an image) shows up after some pattern that I can't repeat. Then I switched to IE7 mode and the list-style images appeared, but on every list item, even the sublists which shouldn't have the lists. I didn't uninstall IE8 to see if non-emulated IE7 displayed it correctly, but it worked in Firefox 2-3 so I'm inclined to believe it's IE8 buginess. I'm a bit scared of whether or not IE8's IE7 emulation does act exactly like IE7.

3 Posted by Rob on 8 March 2008 | Permalink

Opacity going missing is particularly annoying to me. My site is maybe one CSS adjustment away from looking 100% in the new browser except for the fact that I use opacity for image replacement over my logo. I hope it's it's coming in strict mode (switching to IE7 mode makes it come back.) I know they're aiming for CSS2.1 support, but that's a feature from CSS3 that I'd like to see.

4 Posted by Arron Eicholz [MSFT] on 8 March 2008 | Permalink

@Borgar - list-style-image is currently a known bug.

As for quotes this feature is not implemented in this beta. So content: open-quote will not generate a quote.

5 Posted by Debra on 8 March 2008 | Permalink

I am looking forward to using a finished IE 8 product when it comes available, I have been a dedicated Internet Explorer surfer since the beginning.

6 Posted by John oyler on 12 March 2008 | Permalink

Please, please, please Evil Microsoft Overlords... have mercy and give us poor worms border-radius.

I beg you.

7 Posted by Brian on 17 March 2008 | Permalink

Anchors with positioned text, a:hover, and display: block do not function correctly. For example, any link which has text absolutely positioned left: -999em ... is not hover- or click- able. This technique is widely used on accessible menus which use background images for mouse hover, while providing off screen text for screenreaders. This bug makes it impossible to test any design using this technique.

8 Posted by lynne on 18 March 2008 | Permalink

I find it comical that IE8 is concerned with worries that it may break the web as its being said. All I know is that IE8 new standards are quirky. As expected pages rendered poorly with the preview or wouldn't work at all. I even found on an article that Windows Update was still greeting IE8 Beta 1 users with the message: To use this site, you must be running Microsoft Internet Explorer 5 or later. Apparently 6 months till new browser deployment which will be interesting.

9 Posted by Morten on 2 April 2008 | Permalink

Microsoft have said in a whitepaper that they would include some CSS3.0 features based on feedback, so naturally you would think that this would mean we get an opacity property, since this is the most voted-for bug on the connect site.
However, they closed the issue, saying they are not considering to add it until in _a future version_ !
Grr…. they brake the web real good!
See: http://www.sharpgis.net/post/2008/03/31/IE8-will-be-the-only-browser-not-to-support-opacity.aspx

10 Posted by Barry Carlson on 6 April 2008 | Permalink

Having created a small xhtml page using float:left to stack 3 divs side by side and ensuring they all had widths; you guessed it - it broke in IE8 but fine from IE5.01 und up. No problems in FireFox, Opera, Safari Win & Mac. Seems there is a 'width' problem, and why have they chosen to make the horizontal scrollbar visible (opac) when its not required?

11 Posted by Henri on 7 May 2008 | Permalink

By implementing Google Maps, the the map loads outside the div. For example, see http://www.google.nl/maps in your IE8. This bug too counts for own implentation.

I've too have problems width fieldset. Different use of margin/padding?

Do you have problems with select, focus with the mouse? In some textarea's, it's difficult to make a selection.

12 Posted by Henri on 7 May 2008 | Permalink

A STRONG tag within the A tag gives a default vector by a mouseover.

Without a STRONG tag, the mouse over works fine (cursor = hand).