Bagaimanakah Saya Boleh Mencapai Penyampaian Teks Menegak Serasi Cross-Pelayar dengan CSS?

Rendering Pelayar Teks Menegak dengan CSS

Dalam bidang pembangunan web, cabaran untuk memaparkan teks secara menegak telah lama menduduki fikiran pengaturcara. Mencapai kesan ini merentas berbilang penyemak imbas, memastikan keserasian sejagat, telah menjadi usaha berterusan.

Penyelesaian Ideal

Penyelesaian optimum muncul dengan pengenalan transformasi CSS. Dengan menggunakan sifat seperti -webkit-transform, -moz-transform, dan transform, bersama-sama dengan nilai putaran, pembangun boleh dengan mudah memutar teks sebanyak 90 darjah, mencapai penjajaran menegak.

Pelaksanaan Penyemak Imbas Rentas untuk Putaran Teks

Untuk memastikan keserasian dengan pelbagai pelayar, termasuk IE6 , Firefox 2 , Chrome, Safari dan Opera, peraturan CSS berikut boleh digunakan:

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Sebagai sandaran untuk versi penyemak imbas yang lebih lama, peraturan CSS berikut boleh digunakan untuk mencapai kesan yang serupa dalam Firefox 3.5 atau Safari/WebKit 3.1:

.rot-neg-90 {
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
}

Dengan memasukkan peraturan CSS ini ke dalam reka bentuk web anda, anda boleh memaparkan teks menegak dengan mudah dengan keserasian merentas pelayar, memperkasakan pengguna anda dengan tipografi yang menawan secara visual merentas platform.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Penyampaian Teks Menegak Serasi Cross-Pelayar dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!