Internet Explorer 8 Compatibility Issues

I am a relative noob at graceful degredation, and wanted some tips on a site that just went live. I know that at this point the layout is completely broken in IE 8 or lower, and wa

Solution 1:

Its not much hard to tackle IE8 there are lots of ways to achieve a decent look for IE8 moreover, your website layout is quite simple to get it done.

I see two Issues which are making website look bad in IE8

1) Some html5 tags 2) Some CSS3 Properties

Add below to head tag of your website;

<!--[if lt IE 8]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Respond.js Usage

I hope website will look much better in IE8. Moreover, you can add a custom for IE8 and can make things good in that;

<!--[if lt IE 8]>
       <link href="css/for-ie8-only.css" >
<![endif]-->

Last but not the least i recommend to use Modernizer. If you are using html5/css3.

You can check HTML5 & CSS3 Support (In different browsers) to what is supported in which browser.

A relevant question like yours below.

how to make css3 and html5 compatible website for all browsers including IE7 and later

good luck!

Solution 2:

I'm not sure about IE7, but I think you can get decent support for IE8. I have found in my own personal experience that most of the issues with IE8 stem from lack of support for certain CSS features.

I looked at your site and see that you are using CSS features that arn't supported in IE8, such as :nth-child.

Here is a list of feature support - http://www.standardista.com/css3/css3-selector-browser-support/

My solution was to add an IE8 specific and javascript file. I would include these after all other included files, so they are applied last. Then I would override specific elements as needed. I would use the javascript file to correct issues as needed that couldn't be fixed with the CSS file.

<!--[if IE 8]>
    <link  href="/css/ie8.css")" type="text/css" media="screen">
    <script type="text/javascript" src="/js/ie8.js")"></script>
<![endif]-->