IE Overflow fix (jQuery)

The Problem

What I hadn’t realised (though kicking myself for not realising earlier) is that IE has a different implementation of overflow compared to Firefox or Safari.

In particular, Firefox et al, when overflowing an element, it puts the horizontal overflow scroll bar on the outside of the element.

The Solution

It’s worth noting that I can only see this being a problem for horizontal overflow. Vertical overflow is always inside the element, and if you have a specific fixed height for your overflowing elements, you’ll probably want to skip step (3) below.

So our solution is to apply the following to in IE only:

1. Find all elements whose contents is overflowing horizontally.
2. Add 20 pixels of padding to the bottom of our element†.
3. Strip the vertical scroll bar.

† As far as my testing has seen, the typical height of a scroll bar is 20 pixels.
JavaScript to the Rescue

Disclaimer: As much as I’d love to see this problem solved entirely using CSS, or even the browser doing the job, I can’t see how it can be achieved uniformly across all elements, since we only want our changes to apply if, and only if the overflow has occurred (i.e. if we added the padding across the board, some blocks would appear to have an odd blank line when it didn’t overflow).