display:table-单元格不适用于按钮元素

Question

我正在尝试设计一种命令栏的样式。它必须在 IE9 中工作，所以 flexbox 已经过时了。相反，我使用的是 display:table 布局。

第一个片段（使用 <span>s）是我想要的样子。第二个片段是正确的 HTML，但样式不正确。元素布局不正确，将第二个按钮向下推了一行，并且边框没有折叠。

有什么办法可以在不包裹按钮的情况下解决这个问题吗？如果我这样做，我将不得不撤消和重做很多样式，以便将边框放在包装纸上。如果一切都失败了，我想我可以在任何地方用 <span role="button" tabindex="0"> 替换 <button>。

html {
  font-size: 24px;
  line-height: 1rem;
}
* {
  font: 18px Calibri;
  box-sizing: border-box;
}
.controls {
  margin: 1rem;
  height: 1rem;
  width: 800px;
  border: 1px solid #c77;
  background-color: #eee;
  display: table;
  border-collapse: collapse;
}
.controls > * {
  display: table-cell;
  white-space: nowrap;
}
.spacer {
  width: 99%;
}
button,
span {
  height: 1rem;
  border: 1px solid #7c7;
  padding: 0 0.5rem;
  background: #f7f7f7;
}

<div class="controls">
  <div>Title</div>
  <div class="spacer"></div>
  <span>Button A</span>
  <span>Button B</span>
</div>

<div class="controls">
  <div>Title</div>
  <div class="spacer"></div>
  <button type="button">Button A</button>
  <button type="button">Button B</button>
</div>

Answer 1

问题是 <button> 元素无法接受对 display 属性的更改。

某些 HTML 元素在设计上不接受 display 更改。其中三个元素是：

<button>
<fieldset>
<legend>

我们的想法是在设计 HTML 元素时保持一定程度的常识。例如，该规则阻止作者将字段集转换为 table.

但是，在这种情况下有一个简单的解决方法：

Solution 1: Wrap each <button> in a div element.

或

Solution 2: Use another element to submit the form data.

请注意，某些浏览器版本可能实际上接受 display 对 <button> 的更改。但是，上面的解决方案是可靠的跨浏览器。

参考文献：

display:table-单元格不适用于按钮元素

display:table-cell not working on button element

html

css

css-tables