显示：表格单元不适用于按钮元素 [英] display:table-cell not working on button element
问题描述
我正在尝试设置一种命令栏样式。它必须在IE9中工作，所以flexbox不在了。相反，我使用的是 display：table 布局。
I'm trying to style a sort of command bar. It must work in IE9, so flexbox is out. Instead, I'm using a display:table layout.
第一个代码段（使用< span> s）是我想要的外观。第二个片段是正确的HTML，其样式不正确。元素的布局不正确，从而将第二个按钮向下推了一行，并且边框也没有折叠。
The first snippet (using <span>s) is how I'd like it to look. The second snippet is the proper HTML, and it isn't styled right. The elements are not laid out correctly, which pushes the second button down a line, and the borders do not collapse.
有什么方法可以解决此问题而无需包装按钮？如果这样做，我将不得不撤消和重做很多样式，以便将边框放在包装纸上。如果所有其他方法均失败，我想可以将< button> 替换为&span role = button tabindex = 0> 到处都是。
Is there any way to fix this without wrapping the buttons? If I did that, I'd have to undo and redo a lot of styles in order to put the border on the wrapper. If all else fails, I suppose I can replace <button> with <span role="button" tabindex="0"> everywhere.
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>
推荐答案
问题是< button> 元素不能接受对<$ c $的更改c> display 属性。
The problem is that the <button> element cannot accept changes to the display property.
根据设计，某些HTML元素不接受 display 更改。其中三个元素是：
Certain HTML elements, by design, do not accept display changes. Three of these elements are:
-
< button> -
< fieldset> -
&legend>
<button><fieldset><legend>
该想法是在样式化HTML元素时保持一定的常识水平。例如，该规则阻止作者将字段集转换为表。
The idea is to maintain a level of common sense when styling HTML elements. For instance, the rule prevents authors from turning a fieldset into a table.
但是，在这种情况下，有一个简单的解决方法：
However, there is an easy workaround in this case:
解决方案1：将每个
< button>包裹在中div元素。
OR
解决方案2：使用其他元素提交表单数据。
Solution 2: Use another element to submit the form data.
某些浏览器版本实际上可能接受< button> 上的显示更改。但是，以上解决方案是可靠的跨浏览器。
Note that some browser versions may actually accept a display change on a <button>. However, the solutions above are reliable cross-browser.
参考文献：
- 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
这篇关于显示：表格单元不适用于按钮元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
