css - 多行设置在 IE 中不起作用

Question

我的 CSS 有问题。
我有一个非常简单的设置。 2 个 div，每个包含 3 个按钮。我希望它们每个占用 1 行，所以它是 2 行，每行有 3 个按钮。

这也是 Chrome 所做的，但 IE9 将它们全部放在一行中，甚至还改变了其中一个按钮的位置。

我有以下 HTML:

<div id="HelpCodesControl">
    <div class="ButtonRow">
        <button id="HelpCode_None" title="None" />
        <button id="HelpCode_Operator" title="Operator" />
        <button id="HelpCode_Maintenance" title="Maintenance" />
    </div>

    <div class="ButtonRow">
        <button id="HelpCode_Quality" title="Quality" />
        <button id="HelpCode_Warehouse" title="Warehouse" />
        <button id="HelpCode_Setup" title="Setup" />
    </div>
</div>

还有我的 CSS:

#HelpCodesControl {
    height: 100%;
    width: 100%;
    background-color: cadetblue;
}
.ButtonRow {
    background-color: cornflowerblue;
    display: inline-block;
    width: 100%;
}
.ButtonRow button {
    height: 48px;
    width: 100px;
}

我这里有我的示例，它的工作方式与我在 Chrome 中的想法相同，但在 IE9 中却不行:http://jsfiddle.net/M96r3/

那我做错了什么？为什么 IE9 不像 Chrome 那样将我的按钮显示为两行？

Answer 1

HTML 中存在结构错误:按钮未正确关闭。

<button id="HelpCode_None" title="None" />

应该是

<button id="HelpCode_None" title="None"></button>

就像现在一样，浏览器只能看到六个开始标签而没有结束标签，它们原则上将按钮嵌套在彼此内部(尽管没有浏览器那样显示它们；尽管有些浏览器只显示 2 个按钮。不同的浏览器响应不同错误)。

在 XHTML 中，您可以避免这种情况 - 毕竟它是格式良好的 XML - 但强烈不鼓励这样做，因为它会给尝试以 HTML 模式显示 XHTML 的浏览器带来麻烦。仅对 void 元素使用自闭合标签!

这是一个 updated fiddle修正了 HTML，这表明 IE 和其他浏览器之间的显示没有显着差异。