Ini adalah masalah yang kurang terlihat. Ketika font Cina dan Inggris dicampur di browser IE, sering terjadi ketidaksejajaran.
Jadi keraguan muncul lagi, apa yang menyebabkan perbedaan antara bahasa Mandarin dan Inggris? ! Apa solusinya? ! Jadi setelah pengujian saya, saya menemukan dua situasi (tentu saja mungkin ada lebih banyak situasi yang menyebabkan. Anda dapat mencobanya sendiri). Elemen yang berdekatan dari objek berbahasa Mandarin dan Inggris memiliki pengaturan atribut perataan vertikal (seperti gambar kecil sebelumnya, atau kotak teks, kita perlu menyelaraskannya secara vertikal. Umumnya, ketika kita mengatur vertical-align:middle; untuk gambar dan kotak teks (elemen blok sebaris lainnya), ini akan mempengaruhi ketidaksejajaran bahasa Mandarin dan Inggris.
Situasi lainnya adalah ketika elemen induk (kecuali tabel) memiliki kumpulan atribut perataan vertikal, bahasa Mandarin dan Inggris dari elemen turunan di dalamnya juga akan tidak selaras.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<kepala>
<meta content="text/html; charset=utf-8" http-equiv="Jenis Konten" />
<title>Tes</title>
<gaya tipe="teks/css">
* { margin:0; bantalan:0 }
html { latar belakang:#fff;
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, Dinasti Song, sans-serif warna: #333;
</gaya>
</kepala>
<tubuh>
<div style="vertikal-align:middle;">
<a href="">Mengapa saya selalu tidak selaras? kenapa??</a>
</div>
</tubuh>
</html>
Bagaimana mengatasi masalah ini? !
Mari kita bicara tentang yang pertama terlebih dahulu, yang merupakan solusi untuk masalah ketidaksejajaran yang disebabkan oleh bagian tengah vertikal dari elemen yang berdekatan:
tambahkan zoom:1 ke objek berbahasa Mandarin dan Inggris untuk memicu haslayoutnya Melalui penelitian, ditemukan bahwa sekali memiliki tata letak has, objek berbahasa Mandarin dan Inggris Tidak akan ada ketidaksejajaran.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<kepala>
<meta content="text/html; charset=utf-8" http-equiv="Jenis Konten" />
<title>Tes</title>
<gaya tipe="teks/css">
* { margin:0; bantalan:0 }
html { latar belakang:#fff;
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, Dinasti Song, sans-serif warna: #333;
</gaya>
</kepala>
<tubuh>
<div>
<a href="" style="zoom:1;">Mengapa saya selalu tidak selaras? kenapa??</a>
</div>
</tubuh>
</html>
Kasus kedua adalah solusi untuk masalah ketidaksejajaran yang disebabkan oleh bagian tengah vertikal dari elemen induk:
Tambahkan kalimat vertical-align:baseline ke objek berbahasa Mandarin dan Inggris untuk menyelesaikan masalah!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<kepala>
<meta content="text/html; charset=utf-8" http-equiv="Jenis Konten" />
<title>Tes</title>
<gaya tipe="teks/css">
* { margin:0; bantalan:0 }
html { latar belakang:#fff;
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, Dinasti Song, sans-serif warna: #333;
</gaya>
</kepala>
<tubuh>
<div style="vertikal-align:middle;">
<a href="" style="vertical-align:baseline;">Mengapa saya selalu tidak selaras? kenapa??</a>
</div>
</tubuh>
</html>
Namun kita dapat melihat bahwa garis bawahnya tampaknya terlalu ketat. Saat ini, kita masih perlu menambahkan zoom:1; untuk memicu hasLayout-nya agar tidak terlalu ketat! .
<a href="" style="zoom:1;"vertical-align:baseline;">Mengapa saya selalu tidak selaras? mengapa??</a>
Jika Anda menghadapi situasi lain di mana bahasa Mandarin dan Inggris tidak selaras Dalam kasus ini, Anda juga dapat mencoba menggunakan dua metode di atas untuk menyelesaikan masalah. Tentu saja, cara yang paling aman dan efektif adalah dengan menggunakan Song Dynasty dalam bahasa Mandarin dan Inggris.