在Chrome/IE Edge中使用`display：table`和`display：table-cell`到<fieldset>

Question

在Firefox中，此代码并排呈现Test和Test2，但在Chrome和IE Edge中，它们垂直堆叠。哪个是对的？我怎样才能让他们并排在Firefox中。

代码如下：

.grid, 
 
.row, 
 
.column, 
 
.cell { 
 
    box-sizing: border-box; 
 
} 
 
.column { 
 
    vertical-align: top; 
 
} 
 
.row { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    margin: 0; 
 
    vertical-align: top; 
 
} 
 
.half { 
 
    width: 50%; 
 
}

<fieldset class='row'> 
 
    <legend class=title>Foo</legend> 
 
    <fieldset class='cell half'> 
 
    <legend class=subtitle>bar</legend> 
 
    Test 
 
    </fieldset> 
 
    <fieldset class='cell half'> 
 
    <legend>baz</legend> 
 
    Test2 
 
    </fieldset> 
 
</fieldset>

Answer 1

在Firefox该代码使得测试和TEST2并排侧，但在铬和IE边缘它们堆叠。哪个是对的？

基于这些事实：

• 该行有width: 100%，
• 有两个表格单元格，每个width: 50%，
• 盒模型设置为box-sizing: border-box，并
• 边距设置为0

......看来Firefox会正确呈现布局。 Firefox将同一行上的表格单元格对齐，但Chrome将它们包装到两行中。

除fieldset是一种特殊类型的元素。

fieldset不像其他大多数HTML元素一样接受对其display值的更改。实际上，指定display: table,display: table-cell或甚至display: flex至fieldset，将会使元素不可预测且不可靠。

我怎样才能让他们并排在Firefox中。

如果你想改变display值，你就必须在fieldset使用元素以外fieldset或嵌套div/span元素的容器。

有关详细信息和解决方法请看这里：

• Fieldset does not support display: table/table-cell
• Arranging fieldset elements like a typical table-design
• Default CSS values for a fieldset <legend>
• Why do <fieldset>s clear floats?
• Bug 949476 - CSS display property flex does not work on fieldset element

Answer 2

你可以尝试添加浮动：左.half类如。

.half { 
    width: 50%; float:left; 
}