display:table-cell无法处理按钮元素

Question

我正试图设计一种命令栏.它必须在IE9中工作,因此flexbox已经用完了.相反,我正在使用display:table布局.

第一个片段(使用<span>s)是我喜欢它的样子.第二个片段是正确的HTML,它没有正确的样式.元素布局不正确,将第二个按钮按下一行,边框不会折叠.

有没有办法解决这个问题,而不包括按钮？如果我这样做,我必须撤消并重做很多样式才能将边框放在包装器上.如果一切都失败了,我想我可以代替<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属性的更改.

某些HTML元素按设计不接受display更改.其中三个元素是:

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

这个想法是在设计HTML元素时保持一定的常识.例如,该规则可防止作者将字段集转换为表格.

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

解决方案1:将每个元素包裹<button>在一个div元素中.

要么

解决方案2:使用其他元素提交表单数据.

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

参考文献:

• 错误984869 - 显示:flex不适用于按钮元素
• 错误1176786 - 上的Flexbox会阻止内容,但不会建立Flex格式上下文