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中，此代码并排呈现Test和Test2，但在Chrome和IE Edge中它们是堆叠的。哪个是对的？

基于以下事实：

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

......似乎Firefox正确呈现了布局。 Firefox将表格单元格对齐在同一行，但Chrome将它们分成两行。

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

与大多数其他HTML元素一样，

fieldset不接受对其display值的更改。实际上，将display: table，display: table-cell或display: flex指定为fieldset会使元素无法预测且不可靠。

如何在Firefox中并排制作它们。

如果您想更改display值，则需要使用fieldset以外的元素或嵌套div / span元素作为{{1}中的容器}。

有关详细信息和解决方法，请参阅此处：

Answer 2

您可以尝试将float：left添加到类.half，例如

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

将`display：table`和`display：table-cell`应用于<fieldset>在Chrome / IE Edge中不起作用

2 个答案: