In one work example, I wanted to add a background image to a `` to create a more visually appealing button. However, I discovered a bug in IE when displaying the background image of a ``. IE always shows a 1-pixel gap between the border of the `` and the background image, and the color of this gap is determined by the background color of the ``.
This discovery was quite interesting. Originally, the `` only had one layer of border, but now it looks like there are two layers of borders inside and outside. This could be used to create a double-border effect for the button. However, at its core, this is just a bug in IE. Other modern browsers display the background image of the `` very accurately without this 1-pixel gap. Fortunately, CSS 2 has another property: `outline`. As expected, this property is not supported by IE, but the current versions of Firefox, Opera, and Safari can display it properly. Thus, we have a solution: