I'm sure there are loads of posts out there that are more formal but I wanted to share some things I found out during testing of our site on IE8. We would all like to be blunt and tell our users that IE8 is rubbish and we won't support it but the reality is for most of us, some of our potential customers still use Windows XP and for one reason or another can't get a browser beyond IE8.

We have a medium size corporate who have already ordered our software and it was only then that we found out that our system needed to be IE8 compatible. This sounded easy enough, after all, we used bootstrap and jQuery, both of which already do a great job in working with IE8. The problem was, our site didn't work. It all seemed like a disaster where many pages either looked wrong or didn't work at all but using the IE Developer Tools (F12) and a little time and Bootstrap expertise from a colleague, we tracked down the issues fairly quickly and fixed them all in about 2 days.

1. Reserved words in Javascript

I had written my Javascript in bits and pieces, as is common, and hadn't taken much care over the script itself. I am not very familiar with Javascript. Anyway, IE8 doesn't like it when you use words that are normally reserved for variables. For instance, the word "class" is reserved and whereas most modern browsers can work out the context of the variable and know that "class" refers to a variable name, IE8 simply doesn't like it and crashes. Solution: Rename any reserved words such as "continue" or "class" where they are used for function or variable names.

2. Image widths and heights

I know you are not supposed to use the width and height tags in an image but they are a quick and easy way to make the image the correct size (don't worry I wasn't resizing a massive image into a smaller space!). Anyway, these worked in modern browsers but in IE8, the default CSS supplied by Bootstrap (width: auto) was applied instead. This made the images render at their full size, which in my case was slightly too big and caused things to overwrite. Solution: Pass the sizes in via a CSS class instead.

3. float-left and float-right

I'm not sure why this didn't work on IE8 but in my title bar, I have an icon and title floated into the left corner and a padlock icon floated to the right. I used bootstrap's float-left and float-right classes on the divs and all worked fine on the modern browsers. On IE8, however, the logo image was not taking up any space so the div width on the left was set to the width of the title (i.e. too narrow) and caused the title to flow onto the next line. Removing float-left just makes it go to 100% width as per a normal div and this pushes the float-right div onto the next line. Solution: Remove the float-left class from the left-hand div and then keeping the float-right div with its class name, move it to before the left hand div:
...
left hand content

4. Trailing commas on arrays

IE8 really doesn't like it when you have a comma after the last element in your array (var something = [a,b,c,];). It makes the array count increase and therefore the last element is null and this causes things to crash (funnily enough). Solution: Remove any trailing commas from your arrays.

5. Manual page layouts

This one is a pain if you have manually tweaked positions of elements to fit into a page. For instance, I had manually created a 2 x 2 grid to display 4 images and since IE8 has a different box model than the modern browsers, the layout all went funny. Solution: Stick with bootstrap or another library to provide these types of layout. Using bootstrap I could simply create some span columns, in my case combined with thumbnails functionality and achieve the same thing but with Bootstrap to cope with the older browsers.

6. Unsupported Javascript functionality

This occurs because older browsers don't support some of the functionality we are used to. For instance, event.preventDefault() doesn't work in IE8 with inline Javascript. Having a click handler directly on a button, for instance, will error in IE8 if you use preventDefault() because it doesn't exist on the global event object. You could use return false or event.returnValue = false but these are not cross-browser safe. I had another similar problem with window.innerHeight() which I should have obtained using jQuery width() instead. Solution: In most cases, if you use jQuery instead of inline Javascript, you can hide these problems. Attach a click handler using a jQuery selector in then call e.preventDefault() on the event that is passed to the jQuery function, this event is cross-browser safe and will not error. Obviously, you might have other properties that are not present in IE8, you will just need to test the site and Google the alternatives. Look for a jQuery alternative that will probably have already taken care of this for you.

7. Event Handlers firing twice in ASP.Net

I really don't understand how this would be different in IE8 but when using a button HTML control in an ASP.Net with onserverclick="eventHandler", these fire twice on IE8 but only once in other browsers. I only noticed when receiving two validation emails in IE8 whereas you get only 1 normally. Solution: Set type="button" in the HTML button which avoids the automatic submit behaviour.

8. Padding added to minimum height

This was a bug on older Firefox browsers but was also present in IE8. The IE8 box model was more sensible in that the padding and border were inside the width and height of a control. The W3C box model meant that padding, border and margin were all added outside the width and height which made it a nightmare when trying to adjust elements. The bug meant that if min-height (and min-width?) was set on an input, then the padding was incorrectly added to the outside of the width and height. Solution: Using a great modernizr hack from here adds another class to the html element which can then be used to detect the bug. In your css, you add something like:

.padding-added-to-minheight .input-block-level
{
    padding-top: 0px;
    padding-bottom: 0px;
}

Which removes the padding. You also have to make sure the height and line-height of the input elements are the same otherwise the text is not centred in the box. The first class name in the example is the one added by modernizr and the second one is a bootstrap class that adds the padding to the input elements by default.