Helpex - Trao đổi & giúp đỡ Đăng nhập
222

Vấn đề

Tôi có một <select>nơi mà một trong các <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:

<fieldset> thay đổi kích thước sai; dường như không thể di chuyển được `min-width: min-content` select ">

Những gì tôi muốn sau khi thay đổi kích thước:

<fieldset> thay đổi kích thước sai; dường như không thể di chuyển được `min-width: min-content` select cắt bớt nội dung của nó">

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 điều khiển Kết quả để nhỏ hơn chiều rộng của bảng điều khiển <select>, bạn có thể thấy rằng vùng 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ự thấy sau khi thay đổi kích thước:

<fieldset> thay đổi kích thước sai; dường như không thể di chuyển được `min-width: min-content`

Tuy nhiên, trang tương đương với một <div>thay vì a<fieldset> sẽ mở rộng quy mô phù hợp. Bạn có thể thấy điều đó và kiểm tra các thay đổi của mình dễ dàng hơn nếu bạn có một <fieldset>và một <div>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. Bằng <fieldset>cách nào đó, thẻ đang làm cho việc thay đổi kích thước theo chiều ngang bị phá vỡ.

Các <fieldset>hành động như thể có một quy tắc CSS fieldset { min-width: min-content; }. ( min-contentgần như có nghĩa là chiều rộng nhỏ nhất không gây tràn con.) Nếu tôi thay thế <fieldset>bằng a <div>vớimin-width: min-content , nó trông giống hệt nhau. Tuy nhiên, không có quy tắc nào với các min-contentkiể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 Firebug. Tôi đã cố gắng ghi đè mọi kiểu hiển thị trên Trình <fieldset>kiểm tra CSS của Firebug và trong biểu định kiểu mặc định của Firefox, form.css , nhưng điều đó không giúp được gì. Cụ thể là ghi đè min-widthwidthcũng không làm gì cả.

HTML của tập trường:

<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 hoạt động:

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

CSS khác trong đó tôi thử 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

Sự cố cũng xảy ra trong ví dụ jsFiddle toàn diện hơn, phức tạp hơn này , giống với trang web mà tôi thực sự đang cố gắng khắc phục. Bạn có thể thấy rằng đây <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 giả sử rằng cách 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 thay đổi kích thước của chính nó tại thời điểm đó thì kích thước đầy đủ <select>sẽ đạt đến rìa của khung nhìn. Việc thay đổi kích thước xảy ra như thể <select>width: 100%, mặc dù <select>trông giống như nó có width: 50%.

<fieldset> thay đổi kích thước sai; dường như không thể di chuyển được `min-width: min-content`

Nếu bạn đưa ra <select>chính nówidth: 50% , hành vi đó không xảy ra; chiều rộng chỉ đơn giản là được đặt chính xác.

<fieldset> thay đổi kích thước sai; dường như không thể di chuyển được `min-width: min-content`

Tôi không hiểu lý do của sự khác biệt đó. Nhưng nó có thể không liên quan.

Tôi cũng thấy rằng tập trường HTML câu hỏi rất giống nhau cho phép trẻ em mở rộng vô thời hạ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 lại như 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 làm đ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 bao bọc trong một <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>biểu mẫu 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 hạn chế chiều rộng của nó là tốt, nhưng phần có <fieldset>thì không, 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 với việc chỉ xóa dấu <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 bộ 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à một giải pháp JavaScript tốt hơn là không có gì. Nhưng nếu JavaScript là cách duy nhất để làm điều này, tôi rất tò mò muốn nghe giải thích tại sao điều này là không thể nếu 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 vừa bỏ hỗ trợ cho IE7), Firefox mới nhất và Chrome mới nhất. Trang cụ thể 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 có thể chấp nhận được đối với Internet Explorer 8.

Tôi đã thử lại ví dụ bị hỏng của mìnhfieldset 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 sau:

  • Internet Explorer 8, 9 và 10
  • Trình duyệt Chrome
  • Chrome dành cho Android

Nó bị hỏng trong các trình duyệt sau:

  • Firefox
  • Firefox dành cho Android
  • Internet Explorer 7

Vì vậy, trình duyệt duy nhất tôi quan tâm mà mã hiện tại bị ngắt 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 được vấn đề của tôi.

Mẫu HTML của trang web sử dụng các chú thích có điều kiện của Internet Explorer để thêm các lớp như vậy .ie8.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 giải quyết các 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 .

222 hữu ích 5 bình luận 97k xem chia sẻ
351

Cập nhật (ngày 25 tháng 9 năm 2017)

Các lỗi Firefox mô tả dưới đây được cố định như của Firefox 53 và các liên kết đến câu trả lời này cuối cùng đã được lấy ra từ tài liệu Bootstrap của .

Ngoài ra, tôi xin chân thành xin lỗi những cộng tác viên của Mozilla, những người đã phải chặn việc xóa hỗ trợ vì -moz-documentmột phần lý do cho câu trả lời này.

Sự sửa chữa

Trong WebKit và Firefox 53+, bạn chỉ cần đặt min-width: 0;trên tập trường ghi đè giá trị mặc định của min-content

Tuy nhiên, Firefox vẫn hơi… kỳ quặc khi nói đến các bộ trường. Để làm cho điều này hoạt động trong các phiên bản trước đó, bạn phải thay đổi thuộc displaytính của tập trường thành một trong các giá trị sau:

  • table-cell (khuyến nghị)
  • table-column
  • table-column-group
  • table-footer-group
  • table-header-group
  • table-row
  • table-row-group

Trong số này, tôi khuyên bạn nêntable-cell . Cả hai table-rowtable-row-groupngăn cản bạn từ việc thay đổi chiều rộng, trong khi table-columntable-column-groupngăn cản bạn từ việc thay đổi chiều cao.

Điều này (hơi hợp lý) sẽ phá vỡ kết xuất trong IE. Vì chỉ Gecko cần điều này, bạn có thể sử dụng hợp lý @-moz-document— một trong những phần mở rộng CSS độc quyền của Mozilla — để ẩn nó khỏi các trình duyệt khác:

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

(Đây là bản demo jsFiddle .)


Điều đó sửa chữa mọi thứ, nhưng nếu bạn giống tôi, phản ứng của bạn giống như…

Gì.

một lý do, nhưng nó không đẹp.

Trình bày mặc định của phần tử tập trường là vô lý và về cơ bản không thể xác định trong CSS. Hãy nghĩ về điều đó: đường viền của tập trường biến mất khi nó bị phần tử chú giải chồng lên nhau, nhưng nền vẫn hiển thị! Không có cách nào để tái tạo điều này với bất kỳ sự kết hợp nào khác của các yếu tố.

Trên hết, việc triển khai có đầy đủ các nhượng bộ đối với hành vi cũ. Một trong những điều đó là chiều rộng tối thiểu của một tập trường không bao giờ nhỏ hơn chiều rộng nội tại của nội dung của nó. WebKit cung cấp cho bạn một cách để ghi đè hành vi này bằng cách chỉ định nó trong biểu định kiểu mặc định, nhưng Gecko² tiến thêm một bước và thực thi nó trong công cụ kết xuất .

Tuy nhiên, các yếu tố bên trong bảng tạo thành một loại khung đặc biệt trong Gecko. Các ràng buộc về thứ nguyên cho các phần tử có các displaygiá trị này được đặt được tính toán trong một đường dẫn mã riêng biệt , hoàn toàn phá vỡ chiều rộng tối thiểu bắt buộc áp đặt trên các tập trường.

Một lần nữa — lỗi này đã được sửa kể từ Firefox 53, vì vậy bạn không cần phải hack này nếu bạn chỉ nhắm mục tiêu các phiên bản mới hơn.

Sử dụng có @-moz-documentan toàn không?

Đối với một vấn đề này, có. @-moz-documenthoạt động như dự kiến ​​trong tất cả các phiên bản của Firefox cho đến 53, khi lỗi này đã được sửa.

Đây không phải là tai nạn. Một phần do câu trả lời này, lỗi cần giới hạn @-moz-documentđối với biểu định kiểu người dùng / UA đã được thực hiện phụ thuộc vào lỗi tập trường cơ bản được sửa trước.

Ngoài điều này, không được sử dụng @-moz-documentđể nhắm mục tiêu Firefox trong CSS của bạn , bất chấp các tài nguyên khác.³


¹ Giá trị có thể có tiền tố. Theo một độc giả, điều này không ảnh hưởng đến Android 4.1.2 Stock Browser và có thể là các phiên bản cũ khác; Tôi đã không có thời gian để xác minh điều này.

² Tất cả các liên kết đến nguồn Gecko trong câu trả lời này đề cập đến bộ thay đổi 5065fdc12408 , được cam kết vào ngày 29 tháng 7 năm 2013; bạn có thể muốn so sánh các ghi chú với bản sửa đổi gần đây nhất từ ​​Mozilla Central .

³ Xem ví dụ: SO # 953491: Chỉ nhắm mục tiêu Firefox với CSSThủ thuật CSS: Các hack CSS nhắm mục tiêu Firefox cho các bài viết được tham khảo rộng rãi trên các trang web nổi tiếng.

351 hữu ích 5 bình luận chia sẻ
11

Sự cố Safari trên iOS với câu trả lời đã chọn

Tôi thấy câu trả lời từ Jordan Grey đặc biệt hữu ích. Tuy nhiên, dường như nó không giải quyết được vấn đề này trên Safari iOS đối với tôi.

Vấn đề đối với tôi đơn giản là tập trường không thể có chiều rộng tự động nếu phần tử bên trong có chiều rộng tối đa là% chiều rộng.

Khắc phục sự cố

Chỉ cần thiết lập tập trường để có chiều rộng 100% của vùng chứa có vẻ như sẽ giải quyết được vấn đề này.

Thí dụ

fieldset {
    min-width: 0; 
    width: 100%; 
}

Vui lòng tham khảo bên dưới để biết các ví dụ làm việc - nếu bạn loại bỏ% width khỏi tập trường hoặc thay thế bằng auto, nó sẽ không tiếp tục hoạt động.

JSFiddle | Codepen

11 hữu ích 1 bình luận chia sẻ
3

Tôi đã vật lộn trong nhiều giờ với điều này và về cơ bản, trình duyệt đang áp dụng kiểu điện toán mà bạn cần ghi đè trong CSS của mình. Tôi quên thuộc tính chính xác đang được đặt trên fieldsetcác phần tử so với divs (có lẽ min-width?).

Lời khuyên tốt nhất của tôi là thay đổi phần tử của bạn thành a div, sao chép các kiểu đã tính từ trình kiểm tra của bạn, sau đó thay đổi lại phần tử của bạn fieldsetvà so sánh các kiểu đã tính để tìm ra thủ phạm.

Hy vọng rằng sẽ giúp.

Cập nhật: Trợdisplay: table-cell giúp thêm trong các trình duyệt không phải Chrome.

3 hữu ích 3 bình luận chia sẻ
2

.fake-select { white-space:nowrap; }khiến tập trường giải thích .fake-selectphần tử theo chiều rộng ban đầu của nó, thay vì chiều rộng bắt buộc của nó (ngay cả khi phần tràn bị ẩn).

Xóa quy tắc đó và thay đổi .fake-selectmax-width:100%để chỉ width:100%và phù hợp tất cả mọi thứ. Lưu ý là bạn thấy tất cả nội dung của lựa chọn giả mạo, nhưng tôi không nghĩ điều này tệ đến vậy, và nó phù hợp theo chiều ngang.

Cập nhật: với các quy tắc hiện tại trong fiddle sau (chỉ chứa các lựa chọn thực sự), các con của tập trường bị hạn chế về độ rộng đúng. Ngoài việc xóa các quy tắc .fake-selectvà sửa các nhận xét (từ // commentđến /* comment */, tôi đã ghi nhận những thay đổi trong CSS của fiddle.

Tôi hiểu vấn đề của bạn hơn bây giờ và trò chơi phản ánh một số tiến bộ. Tôi đặt quy tắc mặc định cho tất cả các <select>s và dành .xxlargeriêng cho những quy tắc mà bạn biết sẽ rộng hơn 480px (và điều này chỉ hoạt động vì bạn biết chiều rộng của #viewportvà có thể thêm lớp theo cách thủ công vào những quy tắc quá rộng. Chỉ cần một chút thử nghiệm )

Bằng chứng

2 hữu ích 5 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ html width fieldset css , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading