<fieldset> mengubah ukuran salah; tampaknya telah bisa dihilangkan `min-width: min-konten`

Question

Lebih

Question

<fieldset> mengubah ukuran salah; tampaknya telah bisa dihilangkan `min-width: min-konten`

Masalah

Aku punya <select> dimana salah satu dari <option>s nilai-nilai teks yang sangat panjang. Aku ingin <select> untuk mengubah ukuran agar hal ini tidak pernah lebih luas dari induknya, bahkan jika itu untuk memotong teks yang ditampilkan. max-width: 100% harus melakukan itu. Sebelum resize: halaman sebelum mengubah ukuran, yang menunjukkan seluruh `pilih` Apa yang saya inginkan setelah resize: saya halaman yang diinginkan setelah resize, dengan `pilih` kliping isinya Tapi jika anda beban ini jsFiddle contoh dan mengubah ukuran Hasil panel lebar lebih kecil dari <select>, anda dapat melihat bahwa memilih dalam <fieldset> gagal untuk skala yang lebar ke bawah. Apa aku benar-benar melihat setelah resize: saya saat ini halaman setelah resize, dengan scroll bar Namun, setara halaman dengan <div> bukan <fieldset> apakah skala dengan benar. Anda dapat melihat bahwa dan menguji perubahan yang lebih mudah jika anda memiliki a <fieldset> dan<div> di samping satu sama lain pada satu halaman. Dan jika anda delete sekitar <fieldset> tag, resize bekerja. The <fieldset> tag entah bagaimana menyebabkan horizontal mengubah ukuran untuk istirahat. The <fieldset> bertindak seolah-olah ada CSS rule fieldset { min-width: min-content; }. (min-content berarti, kira-kira, lebar terkecil yang tidak menyebabkan anak meluap.) Jika saya mengganti <fieldset> dengan <div> dengan min-width: min-content, terlihat persis sama. Namun tidak ada aturan dengan min-content dalam gaya saya, di browser default stylesheet, atau terlihat di Firebug CSS Inspektur. Saya mencoba untuk mengesampingkan setiap gaya terlihat pada <fieldset> di Firebug CSS Inspektur dan di Firefox default stylesheet bentuk.css, tapi itu tidak membantu. Khusus mengesampingkan min-width dan lebar tidak melakukan apa-apa.

Kode

HTML 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 saya yang harus bekerja tapi tidak:

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

Ulang lebar properties untuk default tidak apa-apa:

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

Lebih lanjut CSS yang saya mencoba dan gagal untuk memperbaiki masalah:

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

Rincian lebih lanjut

Masalah juga terjadi di lebih komprehensif, lebih rumit jsFiddle contoh, yang lebih mirip dengan halaman web aku benar-benar mencoba untuk memperbaiki. Anda dapat melihat bahwa <select> tidak masalah – inline-block div juga gagal untuk mengubah ukuran. Meskipun ini adalah contoh yang lebih rumit, saya berasumsi bahwa perbaikan untuk kasus sederhana di atas juga akan memperbaiki ini kasus yang lebih rumit. [Edit: lihat dukungan browser rincian di bawah ini.] Satu hal yang menarik dari masalah ini adalah bahwa jika anda menetapkan div.wrapper { width: 50%; }](

ini), <fieldset> berhenti resize sendiri pada titik kemudian dalam ukuran penuh <select> akan menekan ujung pandang. Resize terjadi seolah-olah <select> memiliki width: 100%, walaupun <select> terlihat seperti width: 50%. setelah resize dengan 50%-lebar wrapper div

setelah resize dengan 50%-lebar wrapper div

Jika anda memberikan <select> sendiri width: 50%](http://jsfiddle.net/roryokane/q3WMF/), bahwa perilaku tidak terjadi; lebar hanya ditetapkan dengan benar. setelah resize dengan 50%-lebar pilih

Saya tidak mengerti alasan untuk perbedaan tersebut. Tapi itu mungkin tidak relevan. Saya juga menemukan pertanyaan serupa https://stackoverflow.com/q/1716183/578288. Penanya tidak bisa menemukan solusi dan menebak bahwa tidak ada solusi selain menghapus <fieldset>. Tapi aku bertanya-tanya, jika itu benar-benar mungkin untuk membuat <fieldset> display yang tepat, mengapa demikian? Apa yang di <fieldset>s spec atau CSS default (sebagai pertanyaan ini) menyebabkan perilaku ini? Ini perilaku khusus ini mungkin akan didokumentasikan di suatu tempat, karena beberapa browser bekerja seperti ini.

Latar belakang tujuan dan persyaratan

Alasan saya mencoba untuk melakukan hal ini adalah sebagai bagian dari tulisan mobile gaya untuk halaman yang sudah ada dengan bentuk besar. Bentuk ini memiliki beberapa bagian, dan satu bagian dari itu dibungkus dalam `<fieldset>`. Pada smartphone (atau jika anda membuat jendela browser anda kecil), bagian dari halaman dengan `<fieldset>` jauh lebih luas dari sisa formulir. Sebagian besar bentuk kendala yang lebar baik-baik saja, tapi bagian dengan `<fieldset>` tidak, memaksa pengguna untuk memperkecil atau gulir ke kanan untuk melihat semua bagian tersebut. Aku waspada hanya mengeluarkan `<fieldset>`, seperti yang dihasilkan pada banyak halaman dalam satu aplikasi besar, dan aku tidak yakin apa yang selector dalam CSS atau JavaScript mungkin tergantung pada hal itu. Saya dapat menggunakan JavaScript jika saya perlu, dan JavaScript solusi yang lebih baik daripada apa-apa. Tapi jika JavaScript adalah satu-satunya cara untuk melakukan hal ini, aku akan penasaran untuk mendengar penjelasan mengapa hal ini tidak mungkin hanya menggunakan CSS dan HTML.

Edit: dukungan browser

Di situs tersebut, saya perlu untuk mendukung Internet Explorer 8 dan versi lebih baru (kita hanya menjatuhkan dukungan untuk IE7), terbaru, Firefox, dan Chrome terbaru. Halaman khusus ini juga harus bekerja pada iOS dan Android smartphone. Sedikit rusak tetapi masih dapat digunakan untuk perilaku yang dapat diterima untuk Internet Explorer 8. Aku diuji ulang saya rusak fieldset contoh pada browser yang berbeda. Itu benar-benar sudah bekerja di browser ini:

Internet Explorer 8, 9, dan 10
Chrome
Chrome untuk Android Istirahat di browser ini:
Firefox
Firefox untuk Android
Internet Explorer 7 Dengan demikian, satu-satunya browser yang saya peduli tentang hal itu saat ini kode istirahat di Firefox (pada kedua desktop dan mobile). Jika kode yang tetap sehingga bekerja di Firefox tanpa melanggar itu di browser lainnya, yang akan memecahkan masalah saya. Situs template HTML menggunakan Internet Explorer bersyarat komentar untuk menambahkan kelas-kelas seperti itu .ie8 dan .oldie ke <html> elemen. Anda dapat menggunakan kelas-kelas di CSS anda jika anda perlu untuk bekerja di sekitar styling perbedaan di IE. Kelas-kelas yang ditambahkan adalah sama seperti dalam ini versi lama dari HTML5 Boilerplate.

Rory O'Kane

Pertanyaan edit 16 Maret 2018 в 9:15

Pemrograman

html

css

width

fieldset

Solution / Answer

boars

23 April 2014 в 8:55

Lebih

Safari pada iOS masalah ini dengan memilih jawaban

Saya menemukan jawaban dari Jordan abu-Abu untuk menjadi sangat membantu. Namun itu tidak't tampaknya untuk memecahkan masalah ini di Safari iOS untuk saya.

Masalah bagi saya adalah hanya bahwa fieldset tidak memiliki auto lebar jika unsur hanya memiliki max-width sebagai % lebar.

Fix untuk masalah

Hanya menetapkan fieldset untuk memiliki lebar 100% it's wadah tampaknya untuk mendapatkan sekitar masalah ini.

Contoh

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

Silakan lihat di bawah untuk contoh kerja - jika anda menghapus % lebar dari fieldset atau menggantinya dengan auto, itu tidak akan terus berfungsi.

JSFiddle | Codepen

11

0

Related communities 5

HTML dan CSS Indonesia

4 425 pengguna

Silahkan bertanya terkait mengenai HTML maupun CSS. Membaca, menulis, berbagi. Baca dahulu pesan tersemat di pinned post.

Buka telegram

Pemrograman Web Indonesia (HTML CSS Javascript PHP MySQL)

300 pengguna

Official Website : https://webcode.my.id Belajar Pemrograman Web (HTML CSS Javascript PHP MySQL) Grup Belajar Pemrograman Web. HTML + PHP + Javascript + MySQL DB Semoga menjadi forum belajar, menambah wawasan, peningkatan mutu personal kita semua.

107 pengguna

60 pengguna

~ Menerima Jasa Pembuatan Website untuk : Tugas & Instansi 💻 ~ Forum Diskusi Belajar Bersama ✅ ~ Promosi Jasa Minimal 1x Sehari ✅ ~ Dilarang Berbicara Kotor 🚫 ^ Other Grup : Whatsapp Group : Chat Admin untuk masuk ke Grup Whatsapp ^^

Buka telegram

Css Indonesia

17 pengguna

Css Indonesia group ini membahas tentang Css dan web design Bagi yg mau memperdalam Css atau ingin memulai Css atau bahkan Javascript dan html, bisa download aplikasi di bawah ini : https://play.google.com/store/apps/details?id=com.sololearn Thank you

Buka telegram

Tambahkan pertanyaan

Kategori

Semua

Teknologi

Budaya / Rekreasi

Kehidupan / Seni

Ilmu Pengetahuan

Profesional

Bisnis

Pengguna

Semua

Baru

Populer

1

Виталий Теслюк

Terdaftar 7 jam yang lalu

2

shokir qochqorov

Terdaftar 9 jam yang lalu

3

Roxana Elizabeth CASTILLO Avalos

Terdaftar 1 minggu yang lalu

4

Hideo Nakagawa

Terdaftar 1 minggu yang lalu

5

Sergiy Tytarenko

Terdaftar 1 minggu yang lalu

Jordan Gray · Accepted Answer · 2013-07-25T16:28:35+00:00

Update (25 Sept 2017)

Saya sangat lega, [Firefox bug][bug] yang dijelaskan di bawah ini adalah tetap sebagai Firefox 53 dan link untuk jawaban ini akhirnya telah [dihapus dari Bootstrap's dokumentasi][bootstrap-dihapus].

Perbaikan

Di WebKit dan mozilla Firefox 53+, anda hanya mengatur min-width: 0; pada fieldset untuk mengganti nilai default min-content.¹

Namun, Firefox adalah sedikit... aneh ketika datang ke fieldsets. Untuk membuat ini bekerja di versi sebelumnya, anda harus mengubah display milik fieldset untuk salah satu dari nilai berikut:

table-cell (disarankan)
table-column
tabel-kolom-kelompok
meja-footer-kelompok
table-header-kelompok
table-row
table-row-kelompok

Ini, saya sarankan table-cell. Kedua meja-baris dan table-row-kelompok mencegah anda dari mengubah lebar, sementara tabel-kolom dan meja-kolom-kelompok mencegah anda dari mengubah ketinggian.

Ini akan (agak cukup) istirahat rendering di IE. Karena hanya Gecko kebutuhan ini, anda dapat dibenarkan menggunakan [@-moz-dokumen][moz-dokumen]—salah satu [Mozilla's proprietary CSS ekstensi][mozilla-css]—untuk menyembunyikannya dari browser lain:

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

(Di sini's [demo jsFiddle][jsfiddle].)

Yang memperbaiki hal-hal, tetapi jika anda're apa-apa seperti saya reaksi anda adalah sesuatu seperti...

[What.][datar-apa]

Ada adalah suatu alasan, tapi itu's tidak cukup.

Default presentasi dari elemen fieldset tidak masuk akal dan pada dasarnya tidak mungkin untuk menentukan di CSS. Pikirkan tentang hal ini: fieldset's perbatasan menghilang mana itu's tumpang tindih dengan legenda elemen, tapi latar belakang tetap terlihat! Ada's tidak ada cara untuk mereproduksi ini dengan yang lain kombinasi dari unsur-unsur.

Untuk top it off, implementasi penuh dari konsesi untuk warisan mendatang. Salah satunya adalah bahwa lebar minimum dari sebuah fieldset tidak pernah kurang dari intrinsik lebar isinya. WebKit memberi anda cara untuk mengubah perilaku ini dengan menentukan default stylesheet, tapi Gecko² pergi langkah lebih lanjut dan [memberlakukan pada mesin rendering][fieldset-source].

Namun, internal tabel unsur-unsur yang merupakan [khusus jenis frame][internal-meja-sumber] di Rangkasbitung. Dimensi kendala untuk unsur-unsur dengan tampilan set nilai-nilai yang dihitung dalam [kode terpisah path][table-lebar-source], sepenuhnya menghindari ditegakkan lebar minimum yang dikenakan pada fieldsets.

Lagi—[bug untuk ini][bug] telah diperbaiki seperti Firefox 53, sehingga anda tidak perlu hack ini jika anda hanya menargetkan versi yang lebih baru.

Menggunakan `@-moz-dokumen` aman?

Untuk masalah satu ini, ya. `@-moz-dokumen karya sebagaimana dimaksud pada semua versi Firefox sampai 53, dimana bug ini telah diperbaiki.

Ini adalah kecelakaan. Karena di bagian ini menjawab, bug untuk [batas @-moz-dokumen untuk user/UA stylesheet][moz-dokumen-bug] dibuat tergantung pada mendasari fieldset bug yang diperbaiki terlebih dahulu.

Di luar ini, saya tidak lagi merekomendasikan menggunakan @-moz-dokumen untuk secara khusus menargetkan Firefox di CSS anda, sumber daya lain yang menyimpang.³

¹ Nilai dapat diawali. Menurut salah satu pembaca, ini tidak berpengaruh pada Android 4.1.2 Browser Saham dan lainnya mungkin versi lama; saya tidak punya waktu untuk memverifikasi ini.

² Semua link Gecko sumber di jawaban ini merujuk ke [5065fdc12408 changeset][changeset], berkomitmen 29ᵗʰ juli 2013; anda mungkin ingin membandingkan catatan dengan [revisi paling baru dari Mozilla Tengah][gecko-terbaru].

³ Lihat misalnya [JADI #953491: hanya Menargetkan Firefox dengan CSS][jadi-firefox-css] dan [Trik CSS: CSS hacks menargetkan Firefox][css-tricks] untuk luas dirujuk artikel tentang profil tinggi situs.

[bootstrap-dihapus]: https://github.com/twbs/bootstrap/pull/21262

[moz-dokumen-bug]: https://bugzilla.mozilla.org/show_bug.cgi?id=1035091#c75

[jsfiddle]:

[mozilla-css]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions

[moz-dokumen]: https://developer.mozilla.org/en-US/docs/Web/CSS/@document

[datar-apa]: http://tvtropes.org/pmwiki/pmwiki.php/Main/FlatWhat

[fieldset sumber]: http://hg.mozilla.org/mozilla-central/file/5065fdc12408/layout/forms/nsFieldSetFrame.cpp#l400

[internal-meja-source]: http://hg.mozilla.org/mozilla-central/file/5065fdc12408/layout/generic/nsHTMLReflowState.h#l71

[table-lebar-source]: http://hg.mozilla.org/mozilla-central/file/5065fdc12408/layout/generic/nsHTMLReflowState.cpp#l1965

[bug]: https://bugzilla.mozilla.org/show_bug.cgi?id=504622#c5

[changeset]: http://hg.mozilla.org/mozilla-central/file/5065fdc12408/

[gecko-terbaru]: http://mxr.mozilla.org/mozilla-central/source/