A peekaboo bug in Internet Explorer 9?

Question

Okay, I'm baffled.

IE9 is displaying inconsistent page width issues on some but not all pages of a site under development.

In IE9: Going to http://sistercarmen.org/cms/ you can see what looks ROUGHLY like the right page. Actually the page is slightly too wide, and that is certainly a problem. But nothing like what's happening on the About page or the History page.

On those pages, the page gets very wide indeed. BUT, if you mouse over a link in the right column (likely need to horizontally scroll to see one) the page snaps back to the correct size.

Building a simplified test page @ jsFiddle, I could confirm that this seems to be related to display: table but that is important to me so I can serve up the Nav later in the source code. An even simpler test page shows that display:table generally works for IE9.

So ... Is this a hasLayout issue, and if so, how can I force hasLayout in IE9?

Thank you very much,

Jeremy

Answer 1

You're right, that is odd. For what it's worth, you page works fine in IE10.

I've not been able to find a proper solution for you in the time I have available, but in the meanwhile, have you considered applying a width or a max-width to the body text element?

[EDIT]

I can confirm that adding width:100% to the content-lead element will work around the problem.

Still not an answer to why the problem is occurring, but at least it's a work-around.

[EDIT again]

Actually, it turns out the above work-around isn't quite as good as I originally thought. The width:100% only worked for me because I was playing in the console. Doing it in CSS has no effect.

Setting a fixed width may help, or possibly using CSS calc() if a completely fixed width isn't suitable.