Fakes

IE9 blues

Today I had to deal with a weird bug in a site I was updating. As it mimicked a bug I had fixed earlier for IE6 I assumed it would be the same thing, but no - something quite different was wrong. In essence the problem was that I had created a button with some styling to it, and to make sure the button could expand I used a button element with a span inside. Then, because the button had to trigger a Fancybox popup, I had put an anchor element inside the button, around the span. This worked without a hitch in the proper browsers (Chrome, Firefox, etc) but not in IE6 - there I had to add an event listener to the button, to trigger the click on the link (so the bug was presumably the old IE thing of exactly what catches the event).

However, according to the XHTML 1.0 transitional DTD an anchor inside a button is not valid HTML. Fair enough, I thought, the button allows for a host of other elements - such as a paragraph tag. So I wrapped the anchor in a paragraph, checked the validator and sure, it was good and valid. IE9 still wasn't happy though. Long story short, I realized that IE9 would completely disregard any anchors inside a button - unless the document was running in IE8 compatibility mode (which is another way of saying that IE9 didn't get it but IE8 did).

So here's my problem: sure, I managed to fix the code by wrapping the button in the anchor element, instead of the other way round, but I'd just really love to know seemingly valid code creates such a big problem. For reference, here's the code that will generate the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="da" xml:lang="da">
    <head>
        <title>blah</title>
    </head>
    <body>
        <div>
            <button>
                <p><a href='https://plind.dk'>plind.dk</a></p>
            </button>
        </div>
    </body>
</html>

I cannot see anything in the XHTML 1.0 transitional DTD to suggest that the above is not valid code - and hence, IE9 should render it properly. Especially seeing as IE8 seems to do the job ok. But, nope: the anchor is disregarded.

Should anyone know why, I'd love to hear why this would be the case :)

social