css - 跨度定位 IE 和一些 CSS 的未知问题

Question

好吧，我有两个按钮，每个图像都在一个范围内，一个应该放在另一个的顶部，底部的一个在一些文本的顶部，所有的都在一个大图像的右边。但在 Internet Explorer 中，图像和文本不会叠加。

火狐: http://i.stack.imgur.com/Uo9SX.png

互联网浏览器: http://i.stack.imgur.com/cENPC.png

这是当前代码:

    <span class="block">
        <img src="images/application.png" alt="Screenshot" width="569px" height="285px">
    </span>
    <span class="block">
        <a href="portable"><span id="button_portable"></span></a><br>
        <a href="installer"><span id="button_installer"></span></a><br>
        <a href="http://download.microsoft.com/download/1/B/E/1BE39E79-7E39-46A3-96FF-047F95396215/dotNetFx40_Full_setup.exe"><span style="font-size:1em">(Requires .NET framework 4.0)</span></a><br><br>
        <a href="/changelog.php"><span style="font-size:1.3em">Changelog</span></a>
    </span>

和 CSS:

    span.block {
        display: inline-block;
        padding: 20px;
        vertical-align: middle;
    }
    span[id="button_portable"], span[id="button_installer"] {
        background: url("images/download.png") no-repeat scroll 0 0 transparent;
        float: left;
        height: 70px;
        margin-bottom: 10px;
        width: 250px;
    }
    span#button_installer {
        background-position: 0 0;
    }
    span#button_installer:hover {
        background-position: 0 -71px;
    }
    span#button_portable {
        background-position: 0 -142px;
    }
    span#button_portable:hover {
        background-position: 0 -213px;
    }

我查看了几个更改并尝试了所有更改，但似乎都不起作用。

Answer 1

将 float: left; 替换为 display: inline-block;。

参见 demo fiddle .

在 IE7、IE8、IE9、Chrome 12、FF 4 中的 Win7 上测试。