Question

首先，我使用的是IE9，FF 29.0.1和Chrome 35.0.1916.153 m。我已经做了相当多的搜索，尝试跨度而不是div，浮动而不是内联块，不同的DOCTYPE，添加z顺序，确保每个div都有唯一的ID等等。问题变得清晰你在IE中点击F12来查看封面，IE只是以不同于FF或Chrome的方式呈现HTML / CSS。这是页面。我把它减少到最低的共同点。

http://iamix.net/p/ie-problem.html

问题（正如您将看到的）按钮文本显示在FF / Chrome上的按钮下方，应该如此，但在IE9中的按钮之上。当你看看IE如何渲染页面时，它需要第一个button_block div并使其成为其他三个的一个准父级。 FF（使用Firebug）显示它按预期呈现HTML / CSS，四个button_block div中的每一个都是兄弟姐妹。

这是IE＆amp; FF渲染：

http://iamix.net/p/rendering.html（猜我需要一个代表直接发布图片......噢，猜我需要一个代表发布两个以上的链接，所以我把这两个图片放在这里）

这里的总体目标是使布局能够很好地适应不同的屏幕尺寸，包括智能手机。原版中有一些媒体查询来调整屏幕大小，但我已经删除了所有可能仍然存在的问题。在CSS中加载图像的原因是因为根据屏幕大小使用不同的图像大小（如果媒体查询仍然存在，您会看到）。完整的HTML / CSS适用于PC和Android手机上的FF / Chrome（主要目标）。 IE是粘性的（像往常一样）。即使在我打字的时候，我还尝试过其他八件事，因为我真的不想让它成为我所忽视的愚蠢行为。

这是我在问题仍然存在的基础代码（来自上面的第一个链接）：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .button_bar {
                padding-bottom: 0.5em;
                text-align:center;
            }
            .button_bar button {
                border: none;
                height: 250px;
                width: 270px;
            }
            #first_button {
                background: url(http://iamix.net/p/first-button.png) 0px/250px no-repeat;
                background-position: center center;
            }
            #second_button {
                background: url(http://iamix.net/p/second-button.png) 0px/250px no-repeat;
                background-position: center center;
            }
            #third_button {
                background: url(http://iamix.net/p/third-button.png) 0px/250px no-repeat;
                background-position: center center;
            }
            #fourth_button {
                background: url(http://iamix.net/p/fourth-button.png) 0px/250px no-repeat;
                background-position: center center;
            }
            .button_block {
                display: inline-block;
                padding: 0.5em 0 1em 0;
                vertical-align: top;
            }
            .button_text {
                background: #FFFF80;
                color: black;
                display: inline-block;
                font-weight: bolder;
                text-align: center;
                width: 240px;
                word-wrap: break-all;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="button_bar">
                <div class="button_block">
                    <div>
                        <button id="first_button" type="button" />
                    </div>
                    <div>
                        <span class="button_text">This is the First Button</span>
                    </div>
                </div>
                <div class="button_block">
                    <div>
                        <button id="second_button" type="button" />
                    </div>
                    <div>
                        <span class="button_text">And this is the Second Button</span>
                    </div>
                </div>
                <div class="button_block">
                    <div>
                        <button id="third_button" type="button" />
                    </div>
                    <div>
                        <span class="button_text">Which would make this the Third Button</span>
                    </div>
                </div>
                <div class="button_block">
                    <div>
                        <button id="fourth_button" type="button" />
                    </div>
                    <div>
                        <span class="button_text">And this the Fourth and Final Button</span>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

在HTML中，按钮不是＆＃34;自动关闭＆＃34;因此，IE实际上是正确的。只需将/>附加到标记就不会像在XML中那样自动关闭它。你需要这样做：

<button id="fourth_button" type="button"><span>Button Text</span></button>

IE渲染内联块div与FF / Chrome不同

1 个答案: