Vấn đề
Tôi có một <select>trong những <option>giá trị văn bản của nó rất dài. Tôi muốn <select>thay đổi kích thước để nó không bao giờ rộng hơn cha mẹ của nó, ngay cả khi nó phải cắt bỏ văn bản hiển thị của nó. max-width: 100%nên làm điều đó
Trước khi thay đổi kích thước:
Những gì tôi muốn sau khi thay đổi kích thước:
Nhưng nếu bạn tải ví dụ jsFiddle này và thay đổi kích thước chiều rộng của bảng Kết quả nhỏ hơn chiều rộng của bảng kết quả <select>, bạn có thể thấy rằng lựa chọn bên trong <fieldset>không thể thu nhỏ chiều rộng của nó.
Những gì tôi thực sự nhìn thấy sau khi thay đổi kích thước:
Tuy nhiên, trang tương đương với <div>thay vì một<fieldset> tỷ lệ đúng. Bạn có thể thấy điều đó và kiểm tra các thay đổi của bạn dễ dàng hơn nếu bạn có một <fieldset>và <div>bên cạnh nhau trên một trang . Và nếu bạn xóa các <fieldset>thẻ xung quanh , việc thay đổi kích thước sẽ hoạt động. Các <fieldset>thẻ được bằng cách nào đó gây thay đổi kích thước ngang để phá vỡ.
Các <fieldset>hành vi như thể có một quy tắc CSS fieldset { min-width: min-content; }. ( min-contentcó nghĩa là, đại khái, chiều rộng nhỏ nhất không khiến trẻ bị tràn.) Nếu tôi thay thế <fieldset>bằng một <div>bằngmin-width: min-content , nó trông giống hệt nhau. Tuy nhiên, không có quy tắc nào min-contenttrong các kiểu của tôi, trong biểu định kiểu mặc định của trình duyệt hoặc hiển thị trong Trình kiểm tra CSS của Fireorms. Tôi đã cố gắng ghi đè mọi kiểu hiển thị trên Trình <fieldset>kiểm tra CSS của Fireorms và trong biểu mẫu định dạng mặc định của Firefox.css , nhưng điều đó không có ích. Cụ thể ghi đè min-widthvà widthkhông làm gì cả.
Mã
HTML của fieldset:
<fieldset>
<div class="wrapper">
<select id="section" name="section">
<option value="-1"></option>
<option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
<option value="1480">Subcontractor</option>
<option value="3181">Valley</option>
<option value="3180">Ventura</option>
<option value="3220">Very Newest Section</option>
<option value="1481">Visitor</option>
<option value="3200">N/A</option>
</select>
</div>
</fieldset>
CSS của tôi sẽ hoạt động nhưng không phải là:
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}
Đặt lại các widththuộc tính về mặc định không làm gì:
fieldset {
width: auto;
min-width: 0;
max-width: none;
}
Hơn nữa CSS mà tôi cố gắng và không khắc phục được sự cố :
/* try lots of things to fix the width, with no success: */
fieldset {
display: block;
min-width: 0;
max-width: 100%;
width: 100%;
text-overflow: clip;
}
div.wrapper {
width: 100%;
}
select {
overflow: hidden;
}
Thêm chi tiết
Vấn đề cũng xảy ra trong ví dụ jsFiddle toàn diện hơn, phức tạp hơn này , tương tự như trang web mà tôi thực sự đang cố gắng khắc phục. Bạn có thể thấy rằng đó <select>không phải là vấn đề - một khối nội tuyến divcũng không thể thay đổi kích thước. Mặc dù ví dụ này phức tạp hơn, tôi cho rằng việc khắc phục cho trường hợp đơn giản ở trên cũng sẽ khắc phục trường hợp phức tạp hơn này.
[Chỉnh sửa: xem chi tiết hỗ trợ trình duyệt bên dưới.]
Một điều tò mò về vấn đề này là nếu bạn đặtdiv.wrapper { width: 50%; } , các <fieldset>điểm dừng tự thay đổi kích thước tại điểm đó thì kích thước đầy đủ <select>sẽ chạm vào cạnh của khung nhìn. Thay đổi kích thước xảy ra như thể <select>có width: 100%, mặc dù <select>trông giống như nó có width: 50%.
Nếu bạn cho <select>chính nówidth: 50% , hành vi đó không xảy ra; chiều rộng được thiết lập chính xác.
Tôi không hiểu lý do cho sự khác biệt đó. Nhưng nó có thể không liên quan.
Tôi cũng tìm thấy bộ câu hỏi HTML tương tự cho phép trẻ em mở rộng vô tận . Người hỏi không thể tìm ra giải pháp và đoán rằng không có giải pháp nào ngoài việc loại bỏ <fieldset>. Nhưng tôi tự hỏi, nếu thực sự không thể làm cho <fieldset>màn hình hiển thị đúng, tại sao vậy? Có gì trong <fieldset>'s đặc tả hoặc mặc định CSS ( như của câu hỏi này ) gây ra hành vi này? Hành vi đặc biệt này có thể được ghi lại ở đâu đó, vì nhiều trình duyệt hoạt động như thế này.
Mục tiêu và yêu cầu cơ bản
Lý do tôi đang cố gắng thực hiện điều này là một phần của việc viết các kiểu di động cho một trang hiện có với một hình thức lớn. Biểu mẫu có nhiều phần và một phần của nó được gói trong a <fieldset>. Trên điện thoại thông minh (hoặc nếu bạn làm cho cửa sổ trình duyệt của mình nhỏ), phần của trang có <fieldset>phần rộng hơn nhiều so với phần còn lại của biểu mẫu. Hầu hết các biểu mẫu đều hạn chế chiều rộng của nó, nhưng phần <fieldset>không có, buộc người dùng phải thu nhỏ hoặc cuộn sang phải để xem tất cả phần đó.
Tôi cảnh giác chỉ đơn giản là xóa <fieldset>, vì nó được tạo trên nhiều trang trong một ứng dụng lớn và tôi không chắc những công cụ chọn nào trong CSS hoặc JavaScript có thể phụ thuộc vào nó.
Tôi có thể sử dụng JavaScript nếu tôi cần và giải pháp JavaScript tốt hơn không có gì. Nhưng nếu JavaScript là cách duy nhất để làm điều này, tôi sẽ tò mò muốn nghe một lời giải thích tại sao điều này không thể chỉ sử dụng CSS và HTML.
Chỉnh sửa: hỗ trợ trình duyệt
Trên trang web, tôi cần hỗ trợ Internet Explorer 8 trở lên (chúng tôi đã bỏ hỗ trợ cho IE7), Firefox mới nhất và Chrome mới nhất. Trang đặc biệt này cũng sẽ hoạt động trên điện thoại thông minh iOS và Android. Hành vi hơi xuống cấp nhưng vẫn có thể sử dụng được chấp nhận cho Internet Explorer 8.
Tôi đã kiểm tra lại ví dụ bị hỏng của tôifieldset trên các trình duyệt khác nhau. Nó thực sự đã hoạt động trong các trình duyệt này:
- Internet Explorer 8, 9 và 10
- Trình duyệt Chrome
- Chrome cho Android
Nó phá vỡ trong các trình duyệt này:
- Firefox
- Firefox cho Android
- Internet Explorer 7
Do đó, trình duyệt duy nhất tôi quan tâm là mã hiện tại bị hỏng là Firefox (trên cả máy tính để bàn và thiết bị di động). Nếu mã được sửa để nó hoạt động trong Firefox mà không bị hỏng trong bất kỳ trình duyệt nào khác, điều đó sẽ giải quyết vấn đề của tôi.
Mẫu HTML trang web sử dụng các nhận xét có điều kiện của Internet Explorer để thêm các lớp như vậy .ie8và .oldievào <html>phần tử. Bạn có thể sử dụng các lớp đó trong CSS của mình nếu bạn cần khắc phục sự khác biệt về kiểu dáng trong IE. Các lớp được thêm vào giống như trong phiên bản HTML5 Boilerplate cũ này .
<fieldset>(hoặc div.wrapper) bất kỳ chiều rộng nào nó cần, và select { width:100% }. max-widthdường như cung cấp cho phần tử một số% chiều rộng ban đầu của cha mẹ , sau đó không chia tỷ lệ, trong khi widthkhông chia tỷ lệ với cha mẹ của nó. Tôi nghĩ rằng sẽ làm những gì bạn muốn (nhưng tôi có thể đã hiểu lầm). Trong câu đố phức tạp hơn của bạn, hãy thử cung cấp cho các trường ở cột bên trái một% băng thông và chiều rộng tối thiểu pixel. Sau đó cung cấp cho các trường bên phải 100 - (trường bên trái -% - chiều rộng)% chiều rộng.