Bagaimana untuk Mencapai Keserasian Merentas Pelayar untuk Pengiraan CSS Tanpa calc()?

Menyemak Semula Keserasian Penyemak Imbas CSS Calc

Walaupun fungsi CSS calc() menyediakan cara yang mudah untuk melakukan pengiraan untuk penggayaan dinamik dalam penyemak imbas moden, keserasiannya dengan pelayar lama boleh menimbulkan cabaran. Khususnya, IE 5.5 dan lebih tinggi memerlukan pendekatan alternatif.

Kaedah Ungkapan: Pilihan Terhad

Kaedah ungkapan() ialah pilihan sandaran khusus pelayar untuk IE. Walau bagaimanapun, ia mempunyai had yang ketara dan potensi kebimbangan keselamatan. Adalah disyorkan untuk mengelak daripada menggunakannya untuk pengiraan lebar dinamik.

Pesaiz kotak: Penyelesaian Komprehensif

Daripada calc(), pertimbangkan untuk menggunakan saiz kotak: sempadan -kotak sempena padding. Pendekatan ini serasi secara meluas dan membolehkan kawalan tepat ke atas lebar elemen sambil mengambil kira sempadan dan pelapiknya.

Contoh: Menggantikan calc() dengan saiz kotak

Andaikan kami mempunyai bar sisi dengan lebar tetap 300px dan kami ingin mengubah saiz kawasan kandungan utama secara dinamik untuk menduduki ruang yang tinggal:

Menggunakan calc():

.content {
  width: calc(100% - 300px);
}

Menggunakan saiz kotak dan pelapik:

.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: orange;
}
.content {
  padding-left: 300px;
  width: 100%;
  box-sizing: border-box;
  background: wheat;
}

Pendekatan ini menyediakan keserasian merentas pelayar dan menghapuskan keperluan untuk fungsi calc().

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Keserasian Merentas Pelayar untuk Pengiraan CSS Tanpa calc()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!