Adakah terdapat alternatif yang serasi pelayar kepada CSS Calc untuk pengiraan dimensi dinamik?

Alternatif kepada CSS Calc

CSS Calc ialah alat yang berkuasa untuk pengiraan dimensi dinamik, tetapi ia mempunyai sokongan terhad untuk penyemak imbas lama. Satu alternatif kepada Calc yang menawarkan keserasian penyemak imbas yang lebih luas ialah sifat saiz kotak.

Penggunaan saiz kotak

Sifat saiz kotak menentukan cara lebar dan elemen ketinggian dikira. Secara lalai, penyemak imbas menggunakan model "kotak kandungan", di mana lebar dan ketinggian hanya termasuk dimensi kandungan. Walau bagaimanapun, menetapkan saiz kotak kepada "kotak sempadan" mengarahkan penyemak imbas untuk memasukkan pelapik dan sempadan dalam pengiraan lebar dan ketinggian.

Pertimbangkan kod berikut:

.element {
  width: calc(100% - 500px);
}

Kod ini secara dinamik menetapkan lebar elemen menjadi lebar paparan tolak 500px. Walau bagaimanapun, dalam IE 5.5 dan lebih awal, kod ini tidak akan berfungsi.

Sebaliknya, menggunakan saiz kotak mencapai kesan yang sama:

.element {
  width: 100%;
  padding: 0 250px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Di sini, kami menetapkan lebar kepada 100%, tetapi kami menambah 250px padding kiri dan kanan. Kemudian, kami menggunakan saiz kotak: kotak sempadan untuk memasukkan pelapik dalam pengiraan lebar, menghasilkan lebar berkesan yang sama seperti contoh calc().

Sokongan Penyemak Imbas Tambahan

Sifat bersaiz kotak menyokong Opera, penyemak imbas Android dan IE 6 dan lebih baharu. Ini menyediakan kaedah yang boleh dipercayai dan konsisten untuk pengiraan dimensi dinamik merentas pelbagai pelayar.

Atas ialah kandungan terperinci Adakah terdapat alternatif yang serasi pelayar kepada CSS Calc untuk pengiraan dimensi dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!