相关疑难解决方法(0)

所以,我正在使用display: table-cell两个按钮彼此相邻,这样如果一个文本溢出到下一行,则两个按钮的高度相同.我有border-collapse: separate并且正在使用border-spacing它们之间的空间.如果我使用类似的东西<div class="button">,它的工作正常,但是一旦我使用<button>元素,中间空间就会消失.
JSFiddle:http ://jsfiddle.net/uASbb/

现在,使用它<div>现在很好(如果不是在语义上准确),所以我大多只是好奇,如果有人知道这里到底发生了什么.
注意:我也注意到<input>在相同情况下使用元素的一些(不同的)奇怪行为:http ://jsfiddle.net/G5SFX/1/这些实例中

是否display: table-cell不支持？这是一个错误吗？

谢谢!

编辑:似乎你不能应用display: table-cell一个按钮; 它只是默认回到inline-block.从Chrome WebInspector中查看此屏幕截图:


现在问题仍然存在:这是故意的吗？它是规范还是只是浏览器？我们可以改变它吗？

我正试图设计一种命令栏.它必须在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 …