Bagaimana untuk Mencapai Pelarasan Lebar Dinamik Tanpa CSS Calc() untuk Keserasian Penyemak Imbas yang Lebih Luas?

Alternatif kepada CSS Calc

Fungsi CSS calc() dengan mudah membenarkan pelarasan lebar dinamik elemen. Walaupun disokong oleh penyemak imbas moden, ia tidak mempunyai keserasian dengan versi lama seperti IE 5.5 dan ke bawah.

Untuk menyelesaikan masalah ini dan melanjutkan sokongan kepada Opera dan penyemak imbas Android, pertimbangkan untuk menggunakan saiz kotak: kotak sempadan.

Sebagai contoh, anggap div dengan kelas "sideBar" dengan lebar andaian 300px. Untuk melaraskan lebar div "kandungan" secara dinamik berdasarkan lebar bar sisi, elakkan menggunakan:

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

Sebaliknya, gunakan gaya berikut:

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

Dengan mentakrifkan lebar tetap untuk bar sisi dan menggunakan saiz kotak: kotak sempadan pada div kandungan, lebar kandungan melaraskan secara automatik berdasarkan lebar bar sisi, menghapuskan keperluan untuk calc(). Pendekatan ini memastikan keserasian merentas julat penyemak imbas yang lebih luas, termasuk versi lama IE, Opera dan penyemak imbas Android.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Pelarasan Lebar Dinamik Tanpa CSS Calc() untuk Keserasian Penyemak Imbas yang Lebih Luas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!