IE8 - What you need to know March 19, 2009
IE8 CSS Support and Rendering Mode, IE8 debugging, etc.
- IE8 and CSS
- IE8 compliance mode / preventing IE7 rendering in the IE8 browser
- IE8 bugs
- Differences between IE7 compatibility mode and IE8
- IE8 CSS Hack
- IE8 Developer Toolbar (or Firebug for IE8)
IE8 and CSS
IE8 came out today. I appended the CSS selector browser support blog post to include IE8 CSS Selector support and IE7 compliance mode CSS Selector support. Most notable is that IE8 Supports all of CSS2.1 and passes the Acid 2 test.
IE8 compliance mode / preventing IE7 rendering in the IE8 browser
Important to know is that IE8 has a button that allows users to render your page in IE7. If that button is clicked enough, your page will always render in IE7 for everyone (not just those who clicked the button). So, do you have to test your pages in IE8 in IE7 mode? No, you don’t. To ensure that your page is not rendered in IE7 mode inside the IE8 browser add the following meta tag to your pages:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Alternatively, if you want your pages to render in IE7 mode you can write: <meta http-equiv="X-UA-Compatible" content="IE=7" />. The issue with this is that IE7 rendering in IE8 is not identical to plain IE7. So, I recommend against using this meta tag.
So, to ensure that you DON’T have to test in IE7, IE8 and IE8 in IE7 mode, add the code above.
To learn more about what IE8 supports, check out IE8 CSS Selector support.
IE8 bugs
IE8 JavaScript Bug: Apparently IE8 doesn’t much care for prototype and prototip. I think it’s an issue with className that causes IE8 to choke. In the meantime, if you are using Ruby on Rails, then you’re probably using prototype.js. And, if you’re using prototype.js, then IE8 chokes, so you have to use the meta tag. And, if you use the
<meta http-equiv="X-UA-Compatible" content="IE=7" /> tag, make sure it’s the FIRST thing on your page, because IE8 suck ass, just like IE7 and IE6.
If you’re more of an ASP.net fan (which I am NOT!), there is another issue with menus not showing. Mark Hidreth explains it in his blog., but in short, the solution is to add a z-index of greater than zero to <asp:Menu>. Thanks to Attiq Jafar for alerting me to this bug and solution.
IE8 Disappearing Page Bug: If you put two adjacent nodes, both positioned absolutely, and set only one of x- or y- positioning, you may get a blank page.
Differences between IE7 compatibility mode and IE8
These are just a few differences that I have found so far. Please do NOT consider this an exhaustive list
- default padding on <p> is not equal
- table { border-collapse: collapse;} is NOT rendered the same. If dashed, IE8 is properly dotted or dashed, whereas IE7 overlays the lines and it looks ugly, and otherwise does not collapse
- border bottoms on an inline element will not display in IE7 if the border is the lowest part of the page. The page will not grow to include the border, unless the bordered element is block. IE8 will grow.
- border: hidden; IE7 does NOT understand the value of hidden for the border property.
- border-style: outset The coloring is different for IE7 than IE8. IE7 is darker on the bottom/right. IE8 has the darker color on the top/left. Groove and
- RGB - IE7 displays RGB mixed number types: The spec states that values for RGB should be three integers or three percentages, but not a combo of the two. (IE7 and IE6 display mixed types. IE8 and standards compliant browsers dow not render colors with mixed value types.
- IE8 has support for content:, counter-increment: and counter-reset: IE7 doesn’t!
- Empty declarations overide in IE7, but not 8: IE7 will not show a property if there is a malformed declaration after the element. p { color:green; color: } - IE8 will show green. IE7 wont.
- Identifiers starting with a digit or non-letter character followed by a digit: Identifiers starting with dash-number choke IE7: If there is a series of classes or ids listed, including ones that start with a dash followed my an integer, IE7 will choke, and ignore all the selectors in the series. For example,
.-3myClass, .blue {color: blue;} #-3myClass, .blue {color: blue;} .3myClass, .blue {color: blue;} #3myClass, .blue {color: blue;}The element with a class of blue will NOT inherit the blue from either of these declarations
- @import is not correctly supported in IE7: @import “support/import-coloroveride.css”; (see the one before it for comparison)
- border-width: thin appears to be 1px wide in IE8 and 2px wide in IE7
- clearing: if you clear an element in IE7 after a floated element, and the element has a margin top, that will be the space between it and the floated element. In IE8, the margin top will be the space between it and the last non-floated element.
- box model: Some people believe that IE got the box model right, and the w3c got the box model wrong. IE8 gets the box model right according to the w3c.
IE8 CSS Hack
This IE8 CSS hack uses the star hack to target IE7 and lower, but you can use any other of the many IE hacks to target older IE browseres.
p.myclass {
color: green;
*color: red;
}
body:last-child p.myclass {
color: blue;
}
IE8 Developer Toolbar (or Firebug for IE8)
IE8 comes with a developer toolbar. The developer toolbar is definitely more robust than what came with IE7. Similar to Firebug, you highlight an element, and can edit CSS on the fly, but the mechanism is less robust. The CSS module informs you of inherited CSS and current values (in reverse order from Firebug). The CSS panel has check boxes next to each css property so you can turn on and off that property, and you can indeed edit the value or property by clicking on the value or property. You can’t use the up/down arrows like in Firebug, and unlike Firebug, the change isn’t instant: you have to click out of the property to see the change. However, it is definitely an improvement on the previous dev toolbar.
I should probably write a tutorial on this developer toolbar, but I really don’t care enough about this browser to put the effort in to it…. but maybe.
I am on a panel at