IE8 html5shiv...not all styles are being applied

Question

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.

It's not really *unnecessary* if it's the only thing the browser supports... anyway, have you tried giving them all a class of `article` and styling that? — TylerH, Apr 13 '15 at 16:23
@TylerH yes, this is the first thing I tried but it didn't work. — Nick Manning, Apr 13 '15 at 16:29
@zgood it is a sponsored webpage made for companies such as banks who can only review the site internally on IE8. — Nick Manning, Apr 13 '15 at 16:29
It's hard to tell exactly what you've tried since you only gave example code. For instance, I hope your real code doesn't use `script id=""` instead of `script src=""`. — TylerH, Apr 13 '15 at 16:31
@TylerH I just copied and pasted the code into the script tag. You can see if you go to the link I posted http://www.webnotes.xyz/ie8.html — Nick Manning, Apr 13 '15 at 16:33
Funnily enough that link is blocked by my work filter for security purposes :-) — TylerH, Apr 13 '15 at 16:33

score 0 · Answer 1 · edited May 23 '17 at 10:24

0

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

edited May 23 '17 at 10:24

Community

1
1

answered Apr 13 '15 at 16:31

zgood

12,181
2
25
26

Thanks...Good to know, but I don't think this is it. I can see that it is not in compatibility mode. – Nick Manning Apr 13 '15 at 16:39

score 0 · Answer 2 · answered Apr 13 '15 at 16:53

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!

IE8 html5shiv...not all styles are being applied

2 Answers2