IE wasting my time (as usual)

This morning I spent a lot of time trying to debug two issues I was having with one of my websites in Internet Explorer. The first was that a border that was meant to have rounded corners (using border-radius) did not have rounded corners. Yet the border-radius properties were showing up in the IE Developer tools correctly.

Eventually I tracked this down to a bug in IE9, which means that a fieldset cannot have rounded borders when it contains a legend: IE9 fieldset rounded corners.

As part of debugging this issue, I found that IE wasn't acknowledging my X-UA-Compatible meta tag. After researching that, it seems that this tag must come before any other script or link tags in the page's head: X-UA-Compatible is set to IE=edge, but it still doesn't stop Compatibility Mode. So I just changed the site to send it as an HTTP header, as recommended in that thread.

The other main issue I had was that IE was overflowing text out of some table cells. I did recall that I had had a problem with this before, due to single long words breaking it. But I was sure that I had fixed that. It took a lot of debugging, but eventually I did track the issue down.

As described in this thread: word-wrap:break-word not working in IE8, it turns out that the element must have hasLayout for the word-wrap to be applied. To get it to work, I had to style my anchor containing the long word so that it had display: block and a max-width set. Other tricks to force hasLayout didn't work for me. (And the IE Developer tools for IE 9 weren't helpful at all here as they don't seem to show whether the element has hasLayout at all. Luckily the IE8 Developer tools do.)

In the afternoon I spent quite a long time trying to work out how to get an element to stretch to the height of its parent table cell (actually a li with display: table-cell). Reading various threads on Stack Overflow it seemed they all came to same conclusion - it's not possible. Actually, it is possible if you use position: absolute on the child element, and set the top, left, bottom, and right to 0. But then I couldn't find any way to get the contents of the child element vertically centred. So in the end I went with a flexbox menu rather than a table one.

I've now tested my site in various browsers, and will hopefully make the changes go live tomorrow. The main problem I have is that while I test in IE going back to IE6, I have no way of testing in the much more used browsers on phones. When the site is live I can hopefully use modern.ie to get some screenshots of what it looks like in various browsers including phones.