Garis bawah CSS terlalu nipis dan terlalu rendah dalam krom

Penjelasan terperinci dan cadangan pembaikan untuk CSS menggariskan paparan penyemak imbas krom

Artikel ini akan membincangkan dua isu yang dihadapi semasa menguji sifat CSS baru text-decoration-thickness dan text-underline-offset dalam Chrome.

Jadual Kandungan

• Underscore lalai tidak konsisten
• Mengatasi gaya lalai penyemak imbas
• Bug Chrome 1: Sistem MACOS yang digarisbawahi terlalu kurus
• Bug Chrome 2: Kedudukan Bergaris Terlalu Rendah
• Cara membantu menyelesaikan pepijat penyemak imbas krom terlebih dahulu

Underscore lalai tidak konsisten

Tambah pautan teks ke laman web mudah, tetapkan font ke Arial, dan kemudian bandingkan kesan paparan yang digariskan di bawah pelayar dan sistem operasi yang berbeza. Hasilnya menunjukkan bahawa ketebalan garis bawah lalai dan kedudukan menegak (asas mengimbangi) pelayar yang berbeza tidak konsisten. Ini mematuhi peruntukan modul hiasan teks CSS, yang menentukan tingkah laku lalai berikut (nilai auto):

Ejen pengguna memilih ketebalan garis hiasan teks yang sesuai. [...] Ejen Pengguna Memilih Offset Underscore yang sesuai.

Mengatasi gaya lalai penyemak imbas

Dua sifat CSS baru dapat menentukan ketebalan dan mengimbangi garis bawah dengan tepat:

• text-decoration-thickness
• text-underline-offset

Menggunakan kedua -dua sifat ini, anda boleh membuat kesan garis bawah yang konsisten walaupun pada pelayar yang berbeza seperti Firefox (Gecko Engine) dan Safari (WebKit Engine).

 H1 {
  Teks-penyerapan: garis bawah;
  Ketebalan Teks-Dekorasi: 0.04EM;
  Text-Underline-Offset: 0.03EM;
}

NOTA: Harta text-decoration-thickness juga mempunyai nilai khas from-font yang mengarahkan pelayar untuk menggunakan lebar garis bawah fon itu sendiri (jika ada). Selepas ujian, kesan garis bawah fon yang berbeza masih tidak konsisten.

Bug Chrome 1: Sistem MACOS yang digarisbawahi terlalu kurus

Sekiranya harta text-decoration-thickness ditetapkan kepada nilai panjang yang berkaitan dengan font yang dikira sebagai nilai piksel bukan integer, Chrome akan dibulatkan bukannya pembulatan. Sebagai contoh, jika berat yang diisytiharkan adalah 0.06em dan pengiraannya ialah 1.92px , Chrome akan menarik berat badan 1px daripada 2px. Isu ini terhad kepada sistem MACOS sahaja.

 {
  Saiz font: 2EM; / * Hasil pengiraan ialah 32px * /
  Teks-ketat-ketebalan: 0.06EM; / * Hasil pengiraan ialah 1.92px * /
}

Tangkapan skrin menunjukkan bahawa garis hiasan teks di Chrome (baris ketiga) adalah dua kali nipis seperti dalam pelayar Safari dan Firefox.

Untuk maklumat lanjut, sila rujuk kepada isu Chromium #1255280.

Bug Chrome 2: Kedudukan Bergaris Terlalu Rendah

Harta text-underline-offset membolehkan dengan tepat menetapkan jarak antara huruf asas dan garis bawah (mengimbangi garis bawah relatif kepada garis dasar). Malangnya, penyemak imbas Chrome tidak melaksanakannya dengan betul pada masa ini, mengakibatkan kedudukan underscore terlalu rendah.

 H1 {
  Teks-penyerapan: garis bawah;
  TEXT-DECORATION-Color: #F707;

  / * Lumpuhkan "Skip Ink" */
  -Webkit-Teks-Dekorasi-skip: Tiada;
  Teks-dekorasi-skip-ink: Tiada;

  /* Tutup seluruh garisan tenggelam*/
  Ketebalan Teks-Dekorasi: 0.175EM;
  Text-Underline-Offset: 0;
}

Oleh kerana pepijat ini, garis bawah tidak dapat dipindahkan sepenuhnya ke garis dasar.

Untuk maklumat lanjut, sila rujuk kepada isu Chromium #1172623.

Nota: Seperti yang ditunjukkan dalam imej di atas, Safari menarik garis bawah di bahagian atas garisan tenggelam dan bukannya bahagian bawah. Ini adalah bug webkit yang telah ditetapkan baru -baru ini. Pembetulan ini harus dimasukkan dalam versi Safari seterusnya.

Cara membantu menyelesaikan pepijat penyemak imbas krom terlebih dahulu

Kedua -dua sifat CSS baru yang digunakan untuk gaya garis bawah adalah penambahan dialu -alukan kepada CSS. Saya harap kedua -dua pepijat krom yang berkaitan ini dapat diperbaiki secepat mungkin. Jika ciri -ciri CSS ini penting untuk anda, tambahkan dibintangi oleh pepijat ini dalam pelacak bug Chromium untuk menyatakan kebimbangan anda.

Atas ialah kandungan terperinci Garis bawah CSS terlalu nipis dan terlalu rendah dalam krom. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!