CODEWITHSUNDEEP
csshtmlinternet-explorer-8html5shiv
Nick Manning
Nick Manning

Reputation: 2989

IE8 html5shiv...not all styles are being applied

I've been struggling for days to get my site to look right on IE8 (because stupid banks haven't updated their browsers), and I've narrowed it down a bit.

I'm using HTML5 tags (not supported by IE8) because I just can't stand unnecessary div soup. I'm using the famous HTML5shiv to get HTML elements like section and article to work in IE8. It seems that IE8 is still not reliable when it comes to these tagnames though.

Here is an example: 

<html>
 <head>
  <title>ie8</title>
  <script id="html5shiv_script">/*blah blah*/</script>
  <style>
    section{display:block;}
    article{display:block;background:green;}
    article.first + article{font-size:72px;}
    article.first{color:yellow;}
    article:first-child{background:blue;}
  </style>
 </head>
 <body>
  <section>
   <article class="first">One</article>
   <article>Two</article>
   <article>Three</article>
   <article>Four</article>
   <article>Five</article>
  </section>
 </body>
</html>

Link: http://www.webnotes.xyz/ie8.html

I couldn't find anything about why these two styles are not being applied in IE8:

article.first + article{font-size:72px;}
article:first-child{background:blue;}

I can't deduce anything from this because IE8 is supposed to support these selectors, and in my personal website, I'm switched these selectors with classes and it still would not work.

I couldn't find anything about this by googling. Can anyone explain why these styles are being ignored in IE8?

IMPORTANT EDIT: I just realized this doesn't work in IE9 either.

Upvotes: 0

Views: 110

Answers (2)

Nick Manning
Nick Manning

Reputation: 2989

I figured out why the example I posted wasn't working. It's because I forgot to include a doctype. <!DOCTYPE html> at the top makes everything work. I still don't know why the actual site I'm working on doesn't work though because that has <!DOCTYPE html>...back to the drawing board!

Upvotes: 0

zgood
zgood

Reputation: 12581

I had a problem similar to this working on an intranet site of an insurance company. By default, IE will force intranet site into compatibility mode, thus breaking your selectors.

IE makes assumption about displaying intranet sites (http://someInternalSite/ vs. http://someInternalSite.myCompany.org). That assumption is that intranet sites work best in compatibility mode.

Reference

If this is the case then maybe this Stack Overflow answer can help.

Also, I believe network admins can create a group policy to force IE into compatibility mode. Reference

Upvotes: 0

Related Questions