Fieldset不支持display：table/table-cell

我正在尝试使用fieldfield的display: table，但它不能正确缩放。如果我将<fieldset>更改为<div>，也是如此。Fieldset不支持display：table/table-cell

我尝试使用Safari和Firefox。

我错过了什么吗？

http://jsfiddle.net/r99H2/

来源

2012-02-09 romaninsh

似乎对我来说工作得很好，但您应该在fieldset中包含一个带有display：table-row元素并包含单元格的元素。 – 2012-02-09 00:56:00

它适用于IE8/IE9，Opera。即使Chrome canary或Firefox每晚都无法运行。 – thirtydot 2012-02-09 01:00:44

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

几乎所有无法使用纯CSS重新创建的元素都会产生这种问题。

来源

2012-02-10 05:56:46

+1现在这对我有意义：http://stackoverflow.com/questions/6481944/why-do-fieldsets-clear-floats – BoltClock 2012-02-10 06:20:38

字段集是具有特殊行为的元素，所以它可能对于发生此问题。

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

来源

2012-02-09 00:59:05

这确实有效，但是有资源列出哪些元素具有特殊行为？ – romaninsh 2012-02-09 04:21:39

您必须在各自的HTML规范中找到它，但我不确定是否有快速参考列表。 – BoltClock 2012-02-10 06:19:49

Fieldset不支持display：table/table-cell

回答

相关问题