Fieldset не поддерживает отображение: table/table-cell

Я пытаюсь использовать display: table с полем, но он не масштабируется правильно. То же самое работает, если я изменю <fieldset> на <div>.Fieldset не поддерживает отображение: table/table-cell

Я пробовал с Safari и Firefox.

Я что-то упустил?

http://jsfiddle.net/r99H2/

источник

2012-02-09 romaninsh

Кажется, что я отлично работаю для меня, но вы, вероятно, должны иметь элемент с 'display: table-row' внутри набора полей и содержащий ячейки. –

Работает в IE8/IE9, Opera. Он не работает даже в Chrome canary или Firefox в ночное время. – thirtydot

В принципе, рендеринг по умолчанию для поля не может быть фактически выражен в CSS. В результате браузеры должны реализовывать его в терминах, отличных от CSS, и это мешает применению CSS к элементу.

Практически любой элемент, который нельзя воссоздать с использованием чистого CSS, будет иметь проблемы такого рода.

источник

2012-02-10 05:56:46

+1 Теперь это имеет смысл для меня: http://stackoverflow.com/questions/6481944/why-do-fieldsets-clear-floats – BoltClock

FIELDSET является элементом с особым поведением, так что, вероятно, для этого вопроса произойдет.

Добавьте еще одну обертку div в свою оболочку fieldset и используйте 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

Вам нужно будет найти его в соответствующих спецификациях HTML, но я не уверен, есть ли список быстрых ссылок. – BoltClock

Fieldset не поддерживает отображение: table/table-cell

ответ

Смежные вопросы