Careful with supporting all versions of IE 8

Problem

Internet Explorer 8 is still mildly popular and so probably needs to be accommodated for on websites.  However, like different versions of Chrome and Firefox, IE8 also has different versions.  There are about 6 different versions of IE8 in the wild.  2 of which I have run into personally.  1 version, on Windows 7 uses the IE8 standards document to show websites while another version runs on Windows XP to show IE7 standards document.  Until 2008, IE8 used to default to render using IE7!  What the hell?  Anyway, the real problem is IE7 does not support a lot of CSS that we use today since, you know, it’s over 10 years old.

Solutions

A good starting point is to use the IE-edge meta tag within the head:

<meta http-equiv="x-ua-compatible" content="IE=Edge"/> 

Another good starting point is to use the modernizr.js script.

IE8 using IE7 does not support box-sizing.  Using modernizr and some handy dandy javascript, we can adjust the dimensions of elements.

Modernizr.addTest("boxsizing", function() {
return Modernizr.testAllProps("boxSizing") && (document.documentMode === undefined || document.documentMode > 7);
});
jQuery(document).ready(function($) {
if( $('html').hasClass('no-boxsizing') ) {
$('.no-boxsizing, .no-boxsizing *').each(function(){
var fullW = $(this).outerWidth(),
actualW = $(this).width(),
wDiff = fullW - actualW,
newW = actualW - wDiff;

$(this).css('width',newW);

var fullH = $(this).outerHeight(),
actualH = $(this).height(),
hDiff = fullH - actualH,
newH = actualH - hDiff;

$(this).css('height',newH);

});
}
});

IE8 using IE7 has no table-cell

One solution is to use

*float:left;

Or, as one stackoverflow person found, use !ie7.. sorry, forgot to save the link.  but anything with !ie7 will only apply to ie7 and below.  (the ie7 part can actually be any non-valid text like !ieisold)

float:left !ie7;

To vertically align images, try this:  http://stackoverflow.com/questions/10998614/ie7-vertically-align-middle-not-working

To test your work out on multiple versions of IE without you having to actually have Windows installed:

http://www.browserstack.com/