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.
2. Image widths and heightsI 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-rightI'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 arraysIE8 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 layoutsThis 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.
7. Event Handlers firing twice in ASP.NetI 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 heightThis 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:
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.