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元素使用自闭标签！

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

Answer 2

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

Answer 3

你看过你的标题了吗？如果它使用chrome或其他Web浏览器而不是IE，请尝试用以下代码替换Header：

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

多行设置无法在IE中运行

3 个答案: