Google Chrome - Lỗi tràn Fieldset

Question

Google Chrome dường như có lỗi khi tràn nội dung bên trong một fieldset.

Đây là một jsfiddle đó chứng tỏ vấn đề: http://jsfiddle.net/Dismissile/Lnm42/

Nếu bạn nhìn vào trang, bạn sẽ thấy rằng khi bạn có một thùng chứa bên trong một fieldset, và container có overflow: auto bộ, và container có nội dung mà sẽ tràn ngang, fieldset thực sự mở rộng thay vì sử dụng một thanh cuộn:

<fieldset class="parent"> 
    <div class="child"> 
     <div class="grandchild"> 
      asdf 
     </div> 
    </div> 
</fieldset> 

<div class="parent"> 
    <div class="child"> 
     <div class="grandchild"> 
      asdf 
     </div> 
    </div> 
</div> 

CSS:

.parent { 
    border: 1px solid green; 
    padding: 20px; 
    margin: 20px; 
} 

.child { 
    border: 1px solid red; 
    padding: 20px; 
    overflow: auto; 
} 

.grandchild { 
    border: 1px solid #ccc; 
    width: 2000px; 
    padding: 10px; 
} 

Có một bản sửa lỗi/sửa lỗi CSS mà tôi có thể sử dụng để nội dung tràn hoàn toàn khi bên trong một fieldset trong Chrome không?

Answer 1

Sử dụng JavaScript để thiết lập chiều rộng của khung nhìn:

• http://jsfiddle.net/Lnm42/2/

Tôi đã thêm một lớp được gọi là fieldset-width đến fieldset:

<fieldset class="parent fieldset-width">

Sau đó thêm mã JQuery này:

$(document).ready(function() { 
    $(".fieldset-width").css("width", $(window).width() - 82); 
}); 

$(window).resize(function() { 
    $(".fieldset-width").css("width", $(window).width() - 82); 
}); 

Nhận xét duy nhất của tôi là tôi không thể nghĩ ra lý do chính đáng để can thiệp vào chức năng fieldset mặc định. Tôi không thích "các thanh cuộn trong các thanh cuộn" để bắt đầu. Đối với các trường nhập, mà các trường thường bao quanh, tôi sẽ đặc biệt thận trọng về việc làm cho người dùng cuộn xung quanh để đến tất cả các trường nhập.

Answer 2

Sử dụng bộ giả giả (aka <div class="fieldset"></div>) Tôi tin rằng bạn có thể đến gần. Xem jsfiddle.

Hãy thử phong cách này:

fieldset,.fieldset { 
    margin: 10px; 
    border: solid 1px black; 
    position: relative; 
    padding: .5em; 
} 

.legend { 
    left: 0.5em; 
    top: -0.6em; 
    color: black; 
    position: absolute; 
    background-color: white; 
    padding: 0 0.25em 0 0.25em; 
} 

Đó là ít hơn lý tưởng như fieldset phong cách cần phải được lặp lại, nhưng đối với tôi nó là giải pháp chấp nhận được duy nhất của tôi chạy với vấn đề này mà tôi đã có thể bắt kịp với. Như trên, bạn có thể áp dụng kiểu dáng hiện trường của bạn cho kiểu dáng giả.

Answer 3

UPDATE:

Tính đến một Chrome gần đây cho MS Windows cập nhật (v28 có lẽ đã không được theo dõi nó xuống chưa?), auto không còn là một giá trị hợp lệ cho min-width, và giải pháp này hoạt động không còn !

giải pháp mới:

Sử dụng inherit thay vì auto dường như khắc phục vấn đề cho tất cả các trường hợp tôi đã thử nghiệm cho đến nay. (Bao gồm cả fiddle gốc .. xem the new fiddle fix để biết chi tiết.)

được cập nhật sửa chữa: FIELDSET {min-width: inherit; }

Original câu trả lời:

Chrome định nghĩa cho fieldset mặc định phong cách user agent: min-width: -webkit-min-content.

Vì vậy, khi khu vực có thể xem của bạn (còn gọi là "màn hình") nhỏ hơn div với chiều rộng cụ thể, -webkit-min-content tăng trường để phù hợp với kích thước của nội dung (cộng với đệm).

Việc sửa chữa: FIELDSET { min-width: auto; }

Tôi cố định fiddle bạn, try it out!

Answer 4

Bạn có thể thêm style = "display: table-column;" đến fieldset như một giải pháp.

Answer 5

Hãy thử:

fieldset { 
    display: table-cell; 
    min-width: 0; 
    box-sizing: border-box; 
} 

Đây là ví dụ của bạn với sửa chữa: http://jsfiddle.net/2u3a9goc/