Fieldset이 display를 지원하지 않습니다. table/table-cell

Question

display: table을 fieldset과 함께 사용하려하지만 적절하게 확장되지 않았습니다. <fieldset>을 <div>으로 변경하면 동일한 문제가 해결됩니다.

Safari 및 Firefox를 사용해 보았습니다.

내가 누락 된 항목이 있습니까?

http://jsfiddle.net/r99H2/

Answer 1

기본적으로, 필드 셋의 기본 렌더링 실제로 CSS로 표현 될 수 없다. 결과적으로 브라우저는 비 CSS 용어로이를 구현해야하며 이는 CSS에 요소를 적용하는 것을 방해합니다.

순수 CSS를 사용하여 재생성 할 수없는 거의 모든 요소에는 해당 종류의 문제가 있습니다.

Answer 2

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>