I have a link that I’ve styled with an icon and a border to look like a button. It’s working fine in all browsers except IE7. The bordered <a> tag is expanding to fill the width of its parent — it’s acting like a block. If I remove the icon, the <b> tag, it’s fine.
Notes: Both <a> and <b> have display: inline-block, which should be supported in Exploder 7 since they’re naturally inline elements. I tried giving them the standard fix (zoom: 1, display: inline;) in my ie7 stylesheet anyways. No luck.
I’ve tried every zoom, position, and display combination I can think of; I’ve looked through all kinds of posts; any help is MUCH appreciated!
Here’s the jsfiddle: http://jsfiddle.net/aF894/
Removing the
text-index: -9999px;will get it to work.IE7 had some oddities with the margins that you’ll need to account for to get it to display in IE7 like the other browsers. However that should be handled in a separate style sheet which it looks like you have.
Will still work in other browsers.
http://jsfiddle.net/aF894/8/