span定位IE和一些CSS的未知问题

我有两个按钮，每个图像在一个范围内，一个按钮应该位于另一个按钮的顶部，底部按钮位于一些文本的顶部，所有按钮都位于一个大图像的右侧。但在InternetExplorer中，图像和文本不堆叠

火狐：

Internet Explorer：

这是当前代码：

    <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重置

---

CSS重置的目的是提供一个“起点”，以便所有浏览器都以相同的默认值启动。这使得页面在不同的浏览器中以类似的方式显示，而不需要针对每个浏览器或特定的CSS“bug”进行特定的攻击，也不需要在name-a-version-of-IE和其他每个浏览器之间存在差异

替换

float:left带
显示：内联块

看

在IE7、IE8、IE9、Chrome 12、FF 4上进行了测试。
是否考虑CSS重置为时已晚？根本没有，尽管我以前从来没有使用过CSS RESET。所以我把它放在当前的CSS之上？是的，通常你把它放在母版页中，或者不管你使用什么，但是它都是第一条规则。我没有读过你的CSS，为什么你有<代码>跨度。[id=“button#u portable”]
？我很确定IE不支持那种无意义的东西（我很确定IE不支持任何东西）。只需使用
button#u portable，span#button_installer
我没有想到，但唉，没有效果。
    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;
    }