Just now I re-tested the CSS Object Model, both to accomodate IE8b1, FF3b4 and Safari 3.1, and because some of my earlier conclusions were wrong.
In my previous post I dismissed getClientRects()
and getBoundingClientRect()
as incomprehensible, but now I understand I should test them with multi-line inline elements. When the methods are used on such elements, they (should) return one rectangle per line.
I rewrote the test page to show absolute elements at the rectangle coordinates, and now it's clear how getClientRects()
is supposed to work, and that IE5.5-7 have significant bugs with this method: they report far too many rectangles. (IE8b1 does the right thing, BTW.)
Thanks to John Resig for taking the lead in dissecting a few browser oddities with these methods.
I also retested the offset-related properties, and Travis Leithead of the IE team revealed the cause of Opera's weird negative values for offsetX/Y
: Opera's reference point is the top/left of the content block (excluding padding and border), while Safari and Konqueror use the top/left of the element's border.
I summarily judged Opera's implementation Incorrect, because the Safari way seems to be the most logical one. I'm open to counter-arguments, though.
Update: The spec says that the correct reference point is the top/left of the padding-box, which makes sense. Page changed to reflect that.
Update 2: Went through the CSS Table, too. No surprises, except for one minor IE8b1 regression. However, I now count IE's support of its own rules[]
array Incorrect for reasons mentioned in the table. This is an old bug.
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 are closed.
1 Posted by Arjan O on 27 March 2008 | Permalink
Hereby the full list of (planned?) CSS changes for IE8 beta 1 and IE8 final. http://msdn2.microsoft.com/en-us/library/cc351024(VS.85).aspx
2 Posted by Chris Hester on 27 March 2008 | Permalink
The demo doesn't seem to work in Firefox 2 or Opera 9.5.
3 Posted by Gwen on 31 March 2008 | Permalink
Several IE applications are not compatible to other browsers (firefox or opera)esp. with a lower version. Since they're made to be better or "greater" than the other, they tend to put a stamp of exclusivity (which doesn't last very long, there are ways!). the link of Arjan says it...some css may be compatible on some versions of applications.
4 Posted by Arjan O on 2 April 2008 | Permalink
Update:
http://msdn2.microsoft.com/en-us/library/cc304082(VS.85).aspx
5 Posted by Ryan Cannon on 21 May 2008 | Permalink
One odd omission: IE7 screws up the the BODY element's offsetHeight property for a page loaded into an iframe. In other words:
window.frames[frame_id].document.body.offsetHeight
Returns the offsetHeight of the BODY element in Firefox and IE6, but the offsetHeight of the IFRAME element in IE7--at least it does when the iframe is smaller than its content. I'll whip up a quick test case when I get the chance.