Apakah Alternatif Terbaik kepada Fungsi calc() CSS untuk Keserasian Penyemak Imbas?

Alternatif Fungsi Calc untuk CSS

Fungsi calc() menawarkan cara yang mudah untuk mengira nilai dalam CSS secara dinamik. Walau bagaimanapun, ia mungkin tidak disokong dalam pelayar lama seperti IE 5.5 dan penyemak imbas mudah alih tertentu. Berikut ialah pendekatan alternatif yang berfungsi dengan lebih baik merentas julat penyemak imbas yang lebih luas:

Bersaiz kotak: kotak sempadan

Hampir setiap contoh calc(100% - ) boleh digantikan dengan menetapkan saiz kotak: kotak sempadan; pada satu elemen dan padding atau margin pada yang lain. Sebagai contoh, untuk menetapkan lebar elemen div secara dinamik:

Pendekatan Asal (dengan calc()):

width: calc(100% - 500px);

Pendekatan Alternatif (tanpa calc()):

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: orange;
}

.content {
  padding-left: 300px;
  width: 100%;
  box-sizing: border-box;
  background: wheat;
}

Keserasian:

Pendekatan alternatif ini menyokong kebanyakan penyemak imbas utama, termasuk IE 5.5 dan ke atas, Opera dan penyemak imbas Android .

Nota: Penyelesaian ini bergantung pada nilai yang tepat untuk dimensi elemen. Jika dimensi elemen adalah bendalir atau tidak dapat ditentukan terlebih dahulu, calc() mungkin satu-satunya pilihan yang berdaya maju.

Atas ialah kandungan terperinci Apakah Alternatif Terbaik kepada Fungsi calc() CSS untuk Keserasian Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!