fieldset firefox tràn CSS fix

Question

Làm cách nào tôi có thể đặt nội dung thành tràn trong fieldset? Nó hoạt động trong IE nhưng không hoạt động trong FF.

Chức năng tương tự tôi có thể đạt được với phần tử div trong cả hai trình duyệt.

mẫu:

<fieldset style="border:thin solid #990033;"> 
    <legend>test</legend> 
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div> 
</fieldset> 
<p>&nbsp;</p> 
<div style="border:1px solid #999999; padding:0 8px 8px 8px;"> 
    <label style="background-color:#FFFFFF; padding:0 5px; position:relative; top:-10px;" >test</label> 
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div> 
</div> 

Answer 1

Tìm thấy giải pháp, thêm phong cách css có điều kiện:

fieldset { 
    display: table-column; 
} 
<!–[if IE]> 
fieldset { 
    display: block; 
} 
<![endif]–> 

Answer 2

bạn không cần phải làm tràn bộ nội dung! Trong IE (6), theo mặc định, thẻ "fieldset" không có đệm, trong FF nó có! Đó là lý do tại sao bạn có một hành vi khác!

Bạn có thể đặt lại vùng đệm (padding: 0px;) của fieldset nhưng trong trường hợp này, trong FF, nhãn trông không ổn! Để khắc phục điều đó, bạn có thể đặt lại padding-bottom của fieldset và áp dụng "margin-left: -12px" cho div bên trong fieldset. Tuy nhiên, điều đó giải quyết vấn đề với FF nhưng tạo ra một vấn đề trong IE!

Vì vậy, đề xuất của tôi là sử dụng các câu lệnh CSS có điều kiện để áp dụng cho từng trình duyệt đúng quy tắc của phong cách!

Answer 3

Đây thực sự là một lỗi trong Firefox và nó tồn tại trong gần 8 năm. : D https://bugzilla.mozilla.org/show_bug.cgi?id=261037

Answer 4

Từ một blog post bởi Emil Björklund:

body:not(:-moz-handler-blocked) fieldset { 
    display: table-cell; 
}