Fenomena pelik lebar tetapan gaya di bawah pertukaran Firefox_Experience

Terdapat senarai data pada halaman, iaitu jadual Ia diletakkan dalam tetingkap div dengan struktur berikut:

Salin kod<.> Kodnya adalah seperti berikut:

... .Senaraikan data....< /table>

%; margin:10px;}
Tetapkan gaya untuk grid #grid {width:100%}
Hasil ujian adalah normal dalam IE, lebar sebenar bekas akan melebihi 100%. dan bar skrol mendatar akan muncul kerana Firefox mengira margin Masukkan lebar, yang sebenarnya sama dengan 100%+20px>100%.
Sudah tentu, anda boleh mengalih keluar definisi margin div dan sebaliknya menggunakan padding badan, bagaimanapun, terdapat kandungan lain pada halaman yang perlu menduduki keseluruhan halaman.
Jadi pada masa lalu, untuk menyelesaikan masalah ini, div ditakrifkan dengan lebar: 98% dalam Firefox Ini nampaknya menyelesaikan masalah, tetapi jika tetingkap penyemak imbas menjadi lebih kecil, 98%+20px di bawah Firefox mungkin lebih besar daripada 100 % dan bar skrol mendatar muncul.

Untuk mencuba, saya menukar gaya bekas kepada #container {width:100%-20; margin:10px}, dan kemudian pergi ke Firefox untuk melihat Haha, ternyata biasa. , ia sama seperti di bawah IE, ia benar-benar pelik, definisi lebar: 100%-20 sepatutnya salah! Tetapi ia menyelesaikan masalah Firefox termasuk margin Saya mencubanya lagi dan mendapati ia boleh dikurangkan dengan mana-mana nombor daripada 100%.
Mungkin ia hanya pepijat, haha! Mungkin ada yang pakar tahu sebabnya. Saya telah mengujinya sendiri dan menyiarkan kod dan tangkapan skrin:

ujian <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <div style="width:200px; overflow-y:auto; background:#efefef; border:2px solid #FF0000"> <div style="width:100%-20; margin:8px" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000"> <table style="width:100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#333333"> <tr> <td bgcolor="#FFFFFF">数据1</td> <td bgcolor="#FFFFFF">数据2</td> <td bgcolor="#FFFFFF">数据3</td> <td bgcolor="#FFFFFF">数据4</td> </tr> <tr> <td bgcolor="#FFFFFF">数据5</td> <td bgcolor="#FFFFFF">数据6</td> <td bgcolor="#FFFFFF">数据7</td> <td bgcolor="#FFFFFF">数据8</td> </tr> </table> </div> </div> [Ctrl+A untuk memilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semulanya untuk melaksanakan
]

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ringkasan penggunaan kad bebas css_Pertukaran pengalamanArtikel seterusnya：Ringkasan penggunaan kad bebas css_Pertukaran pengalaman

Artikel berkaitan

Lihat lagi

• Ringkasan perkara yang perlu anda perhatikan tentang Border semasa menulis CSS
• Bagaimana untuk merealisasikan pemilihan berbilang gaya dan penukaran masa nyata gaya_Pertukaran pengalaman
• Analisis penggunaan terperinci marquee
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved