CSS Cross-browser Compatibility issues with inline elements
Suppose we want to create a button or menu that looks like …
Initial Code
Consider the following code where I have an anchor link wrapping around an image…
We gave this anchor link the class buttonlink so that we can apply a 3px padding and an all-around border.
In Internet Explorer 6 and 7.0 it turns out to be missing the top border…
And in Firefox 1.0 and 2.0 and Opera 9.0, the image is siting too high…
That is because an <a> tag is an inline element and different browsers are having different interpretations as to how to apply padding to an inline element.
Float The Element
If we float the <a> tag, as in …
then it behaves somewhat like a block element.
Here is how it looks in Internet Explorer 6 and 7 and Firefox 1 and Opera 9.
Comments