Question

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

Internet Explorer： 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。

Answer 2

Eric Meyer's CSS Reset通常被认为是那里最好的CSS重置。

CSS重置的目的是提供一个“起点”，以便所有浏览器以相同的默认值启动。这使得页面在不同的浏览器中显示类似，而不需要针对每个浏览器的特定黑客或特定的CSS“bug”或者在IE的名称版本和每个其他浏览器之间存在差异

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

2 个答案: