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

回答

相關問題