Mengapa Teks Salah Jajar pada Mac Apabila Menggunakan `display: table` dan `vertical-align: middle`?

Penyebaran Fon dan Perbezaan Ketinggian Garis pada Mac dan PC

Apabila mereka bentuk elemen web untuk memaparkan kandungan yang dijajarkan secara menegak di tengah, menggunakan CSS teknik seperti paparan: jadual dan jajaran menegak: tengah biasanya menghasilkan hasil yang diingini pada sistem pengendalian Windows. Walau bagaimanapun, ketidakkonsistenan timbul pada peranti Mac, menyebabkan teks kelihatan tidak sejajar di luar elemen yang mengandunginya.

Latar Belakang

Dalam coretan kod yang disediakan, struktur seperti jadual ialah ditakrifkan melalui CSS, dengan pelbagai elemen disusun sebagai sel jadual, termasuk maklumat tentang cuaca, masa dan tarikh. Kehadiran fon tersuai, Cutive, juga ketara.

Penerangan Masalah

Isu ini nyata dalam penjajaran kandungan teks pada peranti Mac. Secara khusus, teks kelihatan melimpah di luar sempadan elemen induknya. Masalah ini konsisten merentas penyemak imbas yang berbeza pada Mac, manakala penyemak imbas Windows memaparkan kandungan seperti yang dimaksudkan.

Punca Kemungkinan

Walaupun punca sebenar percanggahan ini mungkin berbeza, beberapa faktor boleh menyumbang:

• Rendering Fon: Sistem pengendalian yang berbeza memaparkan fon menggunakan kaedah yang berbeza, yang membawa kepada variasi dalam penampilan visual yang terhasil.
• Line-Height: Sifat garis-height boleh menjejaskan penjajaran menegak dan ketidakkonsistenan mungkin timbul antara OS.
• Sistem Pengendalian: Perbezaan merentas platform dalam cara penyemak imbas mentafsir dan menggunakan peraturan CSS , termasuk yang berkaitan dengan penjajaran menegak, boleh membawa kepada hasil yang berbeza.

Penyelesaian Kemungkinan

• Menggunakan Fon Berbeza: Pengujian dengan fon alternatif, seperti Arial, yang mempamerkan pemaparan yang lebih konsisten merentas platform, boleh menyelesaikan isu ini.
• Penormalan Fon: Menggunakan penjana muka fon untuk menukar fon Kutif dan menggunakan teknik penormalan, seperti "Betulkan Metrik Menegak", berpotensi menyelesaikan ketidakkonsistenan pemaparan.
• Pelarasan Elemen Manual: Menentang penggunaan kedudukan berasaskan sel jadual, ketinggian tepat dan pelarasan padding untuk setiap elemen dan anak-anaknya boleh dicuba, walaupun pendekatan ini mungkin memperkenalkan percanggahan penjajaran antara OS.

Pertimbangan Tambahan

Untuk menangani isu penjajaran menegak dengan berkesan, fahami sifat masalah adalah penting. Mengenal pasti sama ada puncanya terletak pada isu ketinggian baris, pemaparan fon atau tafsiran CSS khusus platform akan membimbing pemilihan dan pelaksanaan penyelesaian yang sesuai.

Atas ialah kandungan terperinci Mengapa Teks Salah Jajar pada Mac Apabila Menggunakan `display: table` dan `vertical-align: middle`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!