Rumah > Artikel > hujung hadapan web > Mengapa saya tidak mengecut seperti yang diharapkan? Nampaknya mempunyai masalah lebar min yang tidak boleh ditanggalkan: kandungan min.
Mengapa saya tidak mengecut seperti yang diharapkan? Nampaknya mempunyai masalah lebar min yang tidak boleh ditanggalkan: kandungan min.
- Barbara Streisandasal
- 2024-11-09 22:44:02606semak imbas
isu
Saya mempunyai
Hasil yang dijangkakan
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() {</p>
<pre class="brush:php;toolbar:false">fieldset {
display: table-cell;
}
}
(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. ³
Atas ialah kandungan terperinci Mengapa saya tidak mengecut seperti yang diharapkan? Nampaknya mempunyai masalah lebar min yang tidak boleh ditanggalkan: kandungan min.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!