Fieldset non supporta la visualizzazione: table/table-cell

Question

Sto provando a utilizzare display: table con fieldset, ma non si adatta in modo corretto. La stessa cosa funziona se cambio <fieldset> in <div>.

Ho provato con Safari e Firefox.

Mi manca qualcosa?

http://jsfiddle.net/r99H2/

Answer 1

In sostanza, il rendering di default di fieldset non può in realtà essere espresso in CSS. Di conseguenza, i browser devono implementarlo in termini non CSS e questo interferisce con l'applicazione di CSS all'elemento.

Praticamente qualsiasi elemento che non può essere ricreato utilizzando puro CSS avrà problemi di questo tipo.

Answer 2

fieldset è un elemento con un comportamento speciale, quindi è probabile che per questo problema si verifichi.

Aggiungi un altro div wrapper nel tuo wrapper fieldset e usa il div. Cambia il fieldset in posizione normale o blocca.

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