IE Compatibility Mode triggered by :first-line selector.
A certain page on a website was causing IE8 to switch into “compatibility” mode — and to display as if it weren’t paying attention to any media queries, which it otherwise could handle.
I found a meta tag to add to force it to stay out of compatibility mode — and then it would just display NOTHING! View source, the content was all there, but just a big white screen!
Other pages with similar elements were displaying OK. A few pesky validation errors could not be eliminated, but they weren’t breaking other pages.
Before beginning to attack the long content of the page, I decided to try making a new menu item for this page. I did, but before trying the menu link, I copied the Joomla link and tested viewing just the article (no menu id, no modules) in IE8. It worked fine, but was missing a few styles.
Turns out I had styled a few things on this page with a .menu-### selector, so of course those styles weren’t in play.
I went back and edited the article with a wrapping div with an ID and replaced the .menu-### selector with the #new-id for these 8 rules.
Now the page was broken again!
Narrowing in, I disabled 4 of the 8 rules. — OK. I kept narrowing until only the rule with a :first-line selector was left. Commenting this style out, the page was fine. turn it on, the page displays NOTHING!
I was able to use a :first-child selector to achieve the same appearance — without having to alter the html, because the two line list items had been turned into links.
The JCE editor coded it as two separate links with the between them.
I was able to select li a:first-child and apply the font-styles I wanted.
If any list items are NOT converted to links, they’ll lose the styling, but I’ll deal with that if I must.