锚点在IE7上分为两部分

Question

上：IE8

底部：IE7

你如何修复IE7所以它不会将我的锚分成两部分？我知道 display：block 和 float：left 会解决这个问题，但我宁愿让它内联。这样，我可以在任意放置的锚点按钮的左侧和右侧都有文本。

    #launchChrome {
        font-weight: bold;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255,255,255,1);
        background: #eee;
        background: -moz-linear-gradient(center top, #fff, #cfd5e3);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #cfd5e3));
        border: 1px solid;
        border-color: #ccc #ccc #999 #ccc;
        -moz-border-radius: 0.4em;
        -webkit-border-radius: 0.4em;
        text-shadow: 0 1px 0 rgba(255,255,255,0.7);
        color: #666;
        font-size: 1.4em;
        padding: 0.2em 0.6em;
        margin: 0 0 0 1em;
        -moz-box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
        -webkit-box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
    }

<a id="launchChrome" href="javascript:void(0)" onclick="launch()">
            <img src="<?=base_url()?>images/spacer.gif" class="spriteChannel googleChromeSmall">
            Launch Chrome
        </a>

Answer 1

我用display：inline-block来修复它。

Answer 2

为什么甚至开始使用图片标签？

使用非重复背景图像并在链接上设置左边的填充，以便文本覆盖图像。

Answer 3

首先关闭你的img标签<img />。

第二 - 尝试将zoom:1添加到#launchChrome - 我在IE7中没有完全相同的渲染问题，但它修复了它在IE6 / 7中的外观。那个shoud触发器已经布局了。