Someone checking out my last entry about CDN performance helpfully let me know that my site was displaying horribly in Opera. I’d checked in Firefox, Safari, and Chrome and hadn’t noticed a problem and just assumed I was pretty safe in other browsers since I wasn’t doing anything especially amazing.
A few minutes with Browser Shots later and I found out that it was broken in at least Opera 10 (8 and 9 seemed to work fine, oddly) and IE – all versions, including 8. I confirmed the IE8 problems in a virtual machine (compatibility view didn’t help) and dug in with the Opera developer tool Dragonfly.
Curiously, Dragonfly’s DOM view only showed the first div in the HTML that contained the header. It took a few minutes of head scratching before I started toggling options and idly hit the button to expand the HTML tree… Suddenly everything was there. I ran the W3C Validator again, just to be sure it wasn’t my imagination, and it checked out fine.
It didn’t take long backtracking up the tree to find out where I’d gone “wrong”:
<button />
Apparently Opera 10 and IE wanted the full closing tag:
<button></button>
I’m not surprised IE choked on the short tag, but I’m really disappointed in Opera… I’ve never been happy using it, but I always respected their rendering engine.