Question

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

第一个代码段（使用<span> s）就是我喜欢的样子。第二个片段是正确的HTML，它没有正确的样式。元素布局不正确，将第二个按钮按下一行，边框不会折叠。

有没有办法解决这个问题而不包装按钮？如果我这样做，我必须撤消并重做很多样式才能将边框放在包装器上。如果其他所有方法都失败了，我想我可以用<button>替换<span role="button" tabindex="0">。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

<button>
<fieldset>
<legend>

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

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

解决方案1：将<button>元素中的每个div换行。

OR

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

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

参考文献：

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

1 个答案: