html - 显示 :table-cell not working on button element

Question

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

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

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

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 的更改属性(property)。

某些 HTML 元素在设计上不接受 display变化。其中三个要素是:

• <button>
• <fieldset>
• <legend>

这个想法是在设置 HTML 元素样式时保持一定程度的常识。例如，该规则阻止作者将字段集转换为表格。

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

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

或

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

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

引用资料:

• Bug 984869 - display: flex doesn't work for button elements
• Bug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context