The main style sheet for a project I am working on is not extensive although I have forked device-specific rules into three ‘child’ files: mobile.css, tablet.css and desktop.css. Each of these references the basic.css file using the @import rule first thing in the file following an @charset “utf-8” rule. This arrangement works very well for me although it means an extra request for basic.css. None of the css files is larger than 4K and it is much easier to organise the styles than to get embroiled in a welter of conditional comments for different user agents and media rules in a single file.
After a bit of user agent detection, the appropriate style sheet for desktop, tablet or mobile is written into the head of the html page using the link tag. The pages are marked-up in XHTML 1.1 Strict and the styles are almost entirely CSS 2.1.
The problem begins with IE8 and desktop.css: I have a further style sheet, patch.css, to make up for CSS deficiencies in pre-IE9 versions of Explorer. This is written into the head with a second link tag directly after the first one for desktop.css - provided the browser happens to be a version of IE less than 9. The first rules in patch.css are four @font-face blocks to download the various individual .eot files in a font family. The other major browsers manage font downloads with a single @import for the entire family in the basic.css file. In this case, patch.css successfully downloads the required fonts for IE8 so I know that IE8 sees the CSS file.
However, in standards mode, IE8 ignores the few short rules that follow the @font-face rules. These rules (a couple of color changes, a few border-width tweaks) are also visible in the CSS panel of IE8 Developer Tools. Yet when I set IE8 to compatibility view with IE7 standards, the style rules show.
I have tried debugging the sheet by removing individual rules (beginning with the @font-face and @charset “utf-8” rules) and I have even tried replacing the contents of the patch.css file with all the style rules combined. Nothing I do makes a difference - the style rules either show in IE7 mode or they don’t in IE8 standards.
I would be grateful if someone could point me to what might be wrong.