Bagaimanakah Saya Boleh Mencapai Saiz Dinamik Tanpa Menggunakan CSS Calc() dalam Pelayar Lama?

Alternatif kepada CSS Calc

Fungsi CSS calc() menyediakan cara yang mudah untuk melaksanakan pengiraan matematik dalam peraturan CSS. Walau bagaimanapun, untuk penyemak imbas lama dan beberapa penyemak imbas mudah alih, sokongannya adalah terhad. Artikel ini meneroka pendekatan alternatif untuk mencapai saiz dinamik tanpa menggunakan calc(), terutamanya menyasarkan IE 5.5 dan lebih tinggi, Opera dan penyemak imbas Android.

Walaupun sifat expression() boleh digunakan dalam IE-OLD untuk menyokong sintaks seperti calc, ia ditamatkan dan kebimbangan keselamatan timbul dengan penggunaannya. Sebaliknya, pertimbangkan untuk menggunakan sifat saiz kotak CSS dengan nilai kotak sempadan. Pendekatan ini melibatkan penggunaan pelapik dan jidar, bukannya menolak sifat lebar, untuk mencapai dimensi yang diingini.

Sebagai contoh, mari kita ambil contoh yang diberikan dalam soalan asal, di mana bar sisi dengan lebar tetap mempengaruhi lebar kandungan bersebelahan. Daripada menggunakan lebar: calc(100% - 300px) pada elemen kandungan, kita boleh mencapai kesan yang sama dengan kod 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 menetapkan saiz kotak: kotak sempadan, lebar elemen termasuk pelapik dan sempadannya, dan bukannya menganggapnya sebagai ruang tambahan di luar model kotak elemen. Ini membolehkan padding-left mengurangkan lebar elemen kandungan yang boleh digunakan dengan berkesan tanpa menjejaskan lebar sebenarnya seperti yang diisytiharkan dalam CSS.

Pendekatan ini bukan sahaja disokong dalam IE 5.5 dan lebih tinggi, tetapi juga dalam Opera dan penyemak imbas Android, menyediakan penyelesaian yang konsisten merentas pelbagai pelayar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Saiz Dinamik Tanpa Menggunakan CSS Calc() dalam Pelayar Lama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!