Background: color does not work in IE8

Question

body { background: gray; font-family: sans-serif; width: 960px; margin: auto; } header { background: green; border: 10px solid black; } nav { margin-top:10px; background: #62D99C; border-radius: 10px; padding: 10px; } 

Header and nav background do not work in IE8. It works in Chrome and FF. What should I do? Thanks!

Answer 1

You should apply display:block to the title and navigation elements:

 header { display: block; background: green; border: 10px solid black; } nav { display: block; margin-top:10px; background: #62D99C; border-radius: 10px; padding: 10px; } 

It seems you also need to include the following js:

 <!--[if lt IE 9]> <script> document.createElement('header'); document.createElement('nav'); </script> <![endif]--> 

The reasons for this can be found here:

http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

Simply put, IE8 does not support HTML5 elements by default, but by executing this javascript (only for IE8 or less), it starts to recognize these elements. Most developers use some form of html5 shim to fix this.

http://code.google.com/p/html5shim/

Answer 2

IE8 doesn't seem to support HTML5 features that HTML4 doesn't have (this includes the new elments header and nav ). See answer to the question . Does IE8 support HTML5 and CSS3?

Try replacing the elements with the old, working way: <div class="nav"> and use the .nav CSS selector.

Answer 3

Background color does not work in Internet Explorer (IE)

IE applies some filter before rendering the web page. why some page colors have changed.

you can add the following line to your CSS class to avoid it.

  filter: none !important;