IE 以不同于 FF/Chrome 的方式呈现 inline-block div答案

【问题标题】：IE renders inline-block div differently than FF/ChromeIE 以不同于 FF/Chrome 的方式呈现 inline-block div
【发布时间】：2014-06-14 01:28:52
【问题描述】：

首先，我使用的是 IE9、FF 29.0.1 和 Chrome 35.0.1916.153 m。我做了相当多的搜索，尝试了跨度而不是 div，浮动而不是 inline-block，不同的 DOCTYPE，添加 z 顺序，确保每个 div 都有一个唯一的 ID，等等。当问题变得清晰时你在 IE 中按 F12 来查看幕后，IE 只是呈现 HTML/CSS 与 FF 或 Chrome 不同。这是页面。我已将其简化为最低公分母。

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

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

这是 IE 和 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>

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

在 HTML 中，按钮不是“自动关闭”标签，因此，IE 实际上是正确地做到了这一点。仅将/> 附加到标签并不会像在 XML 中那样自动关闭它。你需要这样做：

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

【讨论】：