Fieldset不支持display：table / table-cell

Question

我正在尝试将display: table与fieldset一起使用，但它没有正确缩放。如果我将<fieldset>更改为<div>，则同样适用。

我尝试使用Safari和Firefox。

我错过了什么吗？

http://jsfiddle.net/r99H2/

Answer 1

基本上，fieldset的默认渲染实际上不能用CSS表示。因此，浏览器必须以非CSS术语实现它，这会干扰CSS对元素的应用。

几乎任何无法使用纯CSS重新创建的元素都会出现这种问题。

Answer 2

fieldset是一个具有特殊行为的元素，因此可能会出现此问题。

在fieldset包装器中添加另一个div包装器，并使用div。将字段集更改回正常或阻止。

<fieldset style="background: pink; width: 100%">
    <div style="display: table; width: 100%">
        <div style="display: table-cell; background: red; width: 33%">a</div>
        <div style="display: table-cell; background: green; width: 33%">b</div>
        <div style="display: table-cell; background: blue; width: 33%">c</div>
    </div>
</fieldset>

Answer 3

当您更改fieldset的宽度时，您正在更改size的{​​{1}}。它的功能是对元素进行分组并在它们周围绘制边框。它的大小不会影响其中的内容。所以，请遵循这一点。

＆＃13;

＆＃13;

border

＆＃13;

.fieldset {
display: table;
padding:0;
border:none;
}
.div {
display:table-cell;
border: 1px solid black;
width:calc(100vw * 1/3);
}

＆＃13;

＆＃13;

＆＃13;