Mengapa Elemen `` Saya Tidak Mewarisi Gaya Fon Induknya?

Ketidakserasian Warisan Fon

Dalam CSS, elemen mewarisi sifat fon induknya, seperti unsur. Walau bagaimanapun, elemen tidak selalu mengikut peraturan ini.

Dalam contoh yang disediakan, dan elemen berkongsi fon Verdana, tetapi elemen dipaparkan sebagai "MS Shell Dlg". Ini kerana elemen borang, termasuk , mempunyai tetapan fon lalai yang mengatasi sifat fon yang diwarisi.

Mengatasi Fon Lalai

Untuk memastikan pewarisan fon yang konsisten untuk semua elemen, tetapan fon lalai untuk elemen borang mesti ditindih secara eksplisit. Ini boleh dicapai dengan menambahkan peraturan CSS berikut:

<code class="css">input, select, textarea, button {
  font-family: inherit;
}</code>

Dengan menambahkan peraturan ini, semua elemen bentuk akan mewarisi sifat fon induknya, termasuk elemen.

Demonstrasi

Demonstrasi langsung penyelesaian tersedia di http://jsfiddle.net/gaby/pEedc/1/. Dalam demo ini, kedua-dua dan elemen memaparkan fon Verdana, seperti yang dijangkakan.

Nota:

Walaupun penyelesaian ini berfungsi dalam kebanyakan penyemak imbas moden, Internet Explorer 9 dan lebih awal tidak menyokong pewarisan fon untuk borang elemen. Dalam penyemak imbas ini, tetapan fon lalai masih akan menggantikan sifat fon yang diwarisi.

Atas ialah kandungan terperinci Mengapa Elemen `` Saya Tidak Mewarisi Gaya Fon Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!