Mengapa saya tidak mengecut seperti yang diharapkan? Nampaknya mempunyai masalah lebar min yang tidak boleh ditanggalkan: kandungan min.

nampaknya terdapat lebar min yang tidak boleh dialihkan: kandungan min

isu

Saya mempunyai dan salah satu daripada Saya mahu mengecut untuk tidak lebih lebar daripada induknya, walaupun ia perlu memotong teks paparannya. max-width: 100% harus melakukan silap mata.

Hasil yang dijangkakan

pilih telah dipotong kandungannya">

hasil sebenar

Penyelesaian

Dikemas kini (25 September 2017)

Pepijat Firefox yang diterangkan di bawah telah diperbaiki dalam Firefox 53, dan pautan kepada jawapan ini telah dialih keluar daripada dokumentasi Bootstrap.

Selain itu, saya memohon maaf yang setulus-tulusnya kepada penyumbang Mozilla yang terpaksa menyekat penyingkiran sokongan untuk -moz-document sebahagiannya disebabkan jawapan ini.

Betulkan

Dalam WebKit dan Firefox 53, anda boleh mengatasi nilai lalai kandungan min hanya dengan menetapkan lebar min: 0; ¹

Firefox agak pelik apabila ia berkaitan dengan set medan. Untuk menjadikan ini berfungsi dengan betul dalam versi terdahulu, anda mesti menukar atribut paparan set medan kepada salah satu nilai berikut:

table-cell (disyorkan) lajur-jadual kumpulan-lajur-meja kumpulan-pengaki-meja kumpulan-pengepala jadual baris jadual table-row-group Antaranya, saya mengesyorkan table-cell. Kedua-dua baris jadual dan kumpulan baris jadual menghalang anda daripada menukar lebar, manakala lajur jadual dan kumpulan lajur jadual menghalang anda daripada menukar ketinggian.

Ini (agak sah) memecahkan pemaparan dalam IE. Memandangkan hanya Gecko perlu melakukan ini, anda boleh menyembunyikan kesan ini secara sah daripada penyemak imbas lain dengan menggunakan salah satu sambungan CSS proprietari Mozilla, @-moz-document:

@-moz -document url-prefix() {

fieldset { display: table-cell; } Salin selepas log masuk }

(Ini ialah demo jsFiddle.)

Sebab

Ini menyelesaikan masalah, tetapi jika anda seperti saya, reaksi anda mungkin...

Apa?

Ia memang mempunyai sebab, tetapi ia tidak mudah untuk difahami. Paparan lalai bagi elemen set medan

adalah tidak masuk akal dan pada dasarnya mustahil untuk ditentukan dalam CSS. Fikirkan tentangnya: sempadan set medan hilang apabila ia bertindih dengan elemen legenda, tetapi latar belakang masih kelihatan! Tiada gabungan unsur lain boleh menghasilkan semula kesan ini.

Paling penting, pelaksanaannya penuh dengan konsesi kepada tingkah laku warisan. Salah satunya ialah lebar minimum set medan tidak pernah kurang daripada lebar intrinsik kandungannya. WebKit menyediakan cara untuk mengatasi gelagat ini dengan menyatakannya dalam helaian gaya lalai, tetapi Gecko² melangkah lebih jauh dan menguatkuasakan gelagat ini dalam enjin pemaparan.

Walau bagaimanapun, elemen jadual dalaman membentuk jenis bingkai khas dalam Gecko. Mengira kekangan saiz untuk elemen dengan tetapan nilai paparan ini adalah dalam laluan kod yang berasingan, melangkau sepenuhnya lebar minimum yang dikuatkuasakan pada set medan.

Sekali lagi - Firefox 53 mempunyai pembetulan pepijat untuk isu ini, jadi anda tidak memerlukan pembetulan ini jika anda hanya menyasarkan versi yang lebih baharu.

Adakah selamat untuk menggunakan @-moz-document?

Untuk masalah ini, ia selamat. @-moz-document berfungsi seperti yang diharapkan dalam semua versi Firefox (sehingga 53, di mana pepijat ini telah dibetulkan).

Ini bukan kemalangan. Sebahagiannya disebabkan oleh jawapan ini, pepijat yang mengehadkan @-moz-document kepada helaian gaya pengguna/UA telah ditetapkan untuk bergantung pada pepijat set medan asas yang sedang diperbaiki.

Selain itu, jangan gunakan @-moz-document dalam CSS untuk menyasarkan Firefox , walaupun sumber lain berbuat demikian. ³