Explorer: Background images underneath borders

Applies to Explorer Windows and Mac.

Explorer positions a background-image underneath the border of the element.

Therefore it's impossible to get the position of a background image in an element with a border correct in all browsers. No problem, we can use nested elements for defining images and borders separately.

Test case

The background image should be wholly visible besides the border of the items. In Explorer it's partially obscured by the border.

Item 1
Item 2
Item 3
Item 4, now with width

Solution

The bug can be solved in Explorer Windows by giving the li a width (or anything that triggers the hasLayout property). Unfortunately this solution does not work in Explorer Mac.