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

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

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

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

http://jsfiddle.net/r99H2/

Ответ 1

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

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

Ответ 2

Набор полей - это элемент со специальным поведением, поэтому, вероятно, это произойдет.

Добавьте еще одну оболочку 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>

Ответ 3

Когда вы меняете ширину fieldset, вы меняете size его border. Его функция состоит в том, чтобы группировать элементы и нарисовать вокруг них границу. Его размер не влияет на содержимое внутри него. Итак, следуйте этому.

.fieldset {
display: table;
padding:0;
border:none;
}
.div {
display:table-cell;
border: 1px solid black;
width:calc(100vw * 1/3);
}

<fieldset class="fieldset">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</fieldset>