1

我的 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 一样在两行中显示我的按钮？

4

3 回答 3

1

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

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

应该

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

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

在 XHTML 中，您可以摆脱这一点——毕竟它是格式良好的 XML——但强烈建议不要这样做，因为它会导致尝试在 HTML 模式下显示 XHTML 的浏览器出现问题。仅对 void 元素使用自闭合标签！

这是一个更正了 HTML 的更新小提琴，它表明 IE 和其他浏览器之间的显示没有显着差异。

于 2013-08-22T11:58:20.203 回答
0

您也可以使用display: table-cell;代替，display: inline-block;但我的建议是使用display: inline-block;for buttonnot to 来.ButtonRow满足您的要求。

于 2013-08-22T07:47:57.177 回答
0

你检查你的 Header 了吗？如果它适用于 chrome 或其他网络浏览器但不适用于 IE，请尝试将您的 Header 替换为：

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
于 2013-08-22T07:48:30.007 回答