As it turns out, IEMobile 6/7 (and presumably anything earlier) doesn’t support classes and ids that are attached to the HTML element. I confirmed this on both IEMobile 6 and 7. Fortunately it looks to be fixed in IEMobile 8 (which makes sense, since it works fine in desktop IE6, which it’s based on).
The consequence of this is that adding an id/class to the html tag will result in the style not being applied to the document:
<!doctype html>
<html id="a" class="b">
<head>
<title>Cascade test</title>
<style type="text/css" media="screen">
#a span { color: red; } /* style isn't applied in IEMobile 6/7 */
.b span { color: yellow; } /* style isn't applied in IEMobile 6/7 */
</style>
</head>
<body>
<span>Testing 123</span>
</body>
</html>
Instead of attaching an id or class on the html tag, attach them on the body tag. I do this all the time. For example, by dynamically changing the class on the body tag I can change the look and feel of a page:
body.red h1 { color: red; }
body.red p { font-size: 14pt; }
body.green h1 {color: green; }
body.green p {font-size: 12pt; font-weight: bold; }
Hi Robert, thanks for the comment. Yeah, you’re right, the body tag is the next best thing, and is probably more common. I should have mentioned that as a possible solution.