Próbuję użyć display: table z zestawem pól, ale nie skaluje się prawidłowo. To samo działa, jeśli zmienię <fieldset> na <div>.Zestaw pól nie obsługuje wyświetlania: tabela/komórka tabeli
Próbowałem z Safari i Firefox.
Czy brakuje mi czegoś?
Zasadniczo domyślnym rendering zestaw pól nie mogą rzeczywiście być wyrażona w CSS. W rezultacie przeglądarki muszą implementować je w kategoriach nie CSS, co przeszkadza w stosowaniu CSS do elementu.
Prawie każdy element, którego nie można odtworzyć za pomocą czystego CSS, będzie miał problemy tego rodzaju.
+1 To ma dla mnie sens: http://stackoverflow.com/questions/6481944/why-do-fieldsets-clear-floats – BoltClock
fieldset jest elementem ze szczególnym zachowaniem, więc jest prawdopodobne, aby ten problem występuje.
Dodaj kolejną przekładkę w opakowaniu pola i użyj elementu div. Zmień zestaw pól z powrotem na normalny lub zablokuj.
<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>
Wydaje się, że działa mi doskonale, ale prawdopodobnie powinieneś mieć element z 'display: table-row' wewnątrz zestawu pól i zawierający komórki. –
Działa w IE8/IE9, Opera. To nie działa nawet w kanalu Chrome czy Firefoxa. – thirtydot