Bagaimana untuk Mencapai \'width: calc(100% - 100px)\' dengan jQuery untuk Keserasian Merentas Pelayar?

Melaksanakan CSS 'width: calc(100% -100px)' Menggunakan jQuery untuk Keserasian Penyemak Imbas

Harta CSS 'width: calc( 100% -100px)' ialah cara yang berkesan untuk mencapai lebar tertentu yang menampung pelbagai kandungan. Walau bagaimanapun, keserasian merentas penyemak imbasnya boleh dihadkan, yang membawa kepada isu paparan dalam penyemak imbas yang tidak menyokong fungsi 'calc()', seperti Safari.

Untuk mengatasi had ini, jQuery boleh digunakan sebagai penyelesaian alternatif. Dengan memanfaatkan keupayaan jQuery untuk memanipulasi gaya CSS secara dinamik, kesan yang serupa dengan 'width: calc(100% -100px)' boleh dicapai.

JQuery Solution:

Kod jQuery di bawah menyediakan alternatif yang berdaya maju kepada sifat CSS yang disebutkan di atas:

$('#yourEl').css('width', '100%').css('width', '-=100px');

Kod ini secara berkesan menetapkan lebar elemen dengan ID 'yourEl' kepada 100%, dan kemudian menolak 100 piksel daripadanya. Lebar yang terhasil dikira secara dinamik dan digunakan pada elemen, memastikan tindak balas merentas penyemak imbas yang berbeza.

Faedah Menggunakan jQuery:

• Keserasian pelayar: penyemak imbas luas jQuery keserasian menghapuskan isu paparan dalam penyemak imbas yang tidak menyokong 'calc()'.
• Pengiraan dinamik: jQuery mengendalikan pengiraan lebar relatif secara automatik, memudahkan proses untuk pembangun.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai 'width: calc(100% - 100px)' dengan jQuery untuk Keserasian Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!