Make CSS 3 and HTML elements work in Internet Explorer 8

1. HTML5 Elements like aside, header etc. 

Include this into your header
(You have to copy the html.tpl.php into your theme folder)

2. CSS3 pseudo-classes like :nth-child, :last-child, :checked etc

Include selectivizr

 

There is also a module for drupal

3. IE8 can not read media queries so add respond.js

https://github.com/scottjehl/Respond Also here you can use a Drupal module https://www.drupal.org/project/respondjs Note: CSS Aggregation must be switched in order to make respond.js work

4. rgba in IE8

for this I found a nice compass mixin in this blog

@mixin rgba-background($color){     @include filter-gradient($color, $color);     @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {         background: transparent;         // set filter as none for IE9+, because IE9+ supprot RGBa         :root & {         filter: none\0/IE9;}     }     background: $color; }

 

and this is how you use it

.blackAlpha50 {     @include rgba-background(rgba(0, 0, 0, .5)); }

 

So you might still need a ie8 stylesheet. This is how to include it in the header of your html.tpl.php

/ie8.css" />