Fieldset không hỗ trợ hiển thị: table/table-cell

Question

Tôi đang cố gắng sử dụng display: table với fieldset, nhưng nó không mở rộng đúng cách. Điều tương tự cũng hiệu quả nếu tôi thay đổi <fieldset> thành <div>.

Tôi đã thử với Safari và Firefox.

Tôi có thiếu gì đó không?

http://jsfiddle.net/r99H2/

Answer 1

Về cơ bản, hiển thị mặc định của fieldset thực sự không thể được thể hiện trong CSS. Kết quả là, các trình duyệt phải thực hiện nó theo các thuật ngữ không phải CSS, và điều đó cản trở việc áp dụng CSS cho phần tử.

Khá nhiều phần tử không thể tạo lại bằng CSS tinh khiết sẽ có vấn đề về loại đó.

Answer 2

Các fieldset là một yếu tố với hành vi đặc biệt, vì vậy nó có thể cho vấn đề này xảy ra.

Thêm một trình bao bọc div khác trong trình bao bọc fieldset của bạn và sử dụng div. Thay đổi fieldset trở lại bình thường, hoặc chặn.

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