Mengapa Imej Saya Masih Mempunyai Sempadan dalam Chrome dan IE9 Walaupun Menggunakan CSS dan jQuery?

Membetulkan Isu Sempadan Imej dalam Chrome dan IE9

Urutan ini menangani isu apabila sempadan yang ketara muncul di sekeliling imej dalam Chrome dan Internet Explorer 9 walaupun percubaan untuk mengalih keluarnya menggunakan CSS dan jQuery.

Kod CSS yang disediakan:

<code class="css">outline: none;
border: none;</code>

melumpuhkan kedua-dua garis besar dan jidar, manakala atribut border=0 ditambahkan pada semua teg imej. Walau bagaimanapun, sempadan masih berterusan.

Punca isu ini ialah pepijat dalam Chrome yang mengabaikan sempadan:none; gaya. Sebagai penyelesaian, kita perlu menipu Chrome supaya mempercayai tiada kandungan untuk dipaparkan. Berikut ialah penyelesaian menggunakan blok ID CSS:

<code class="css">#dlbutn {
    display:block;
    width:0px;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}</code>

Ini menetapkan saiz imej kepada sifar tetapi termasuk pelapik dengan dimensi imej sebenar. Chrome ditipu dengan berkesan untuk memikirkan tiada imej sambil meninggalkan ruang untuk imej latar belakang butang. Penyelesaian ini menghapuskan garis besar dan sempadan yang tidak diingini dalam kedua-dua Chrome dan penyemak imbas lain.

Atas ialah kandungan terperinci Mengapa Imej Saya Masih Mempunyai Sempadan dalam Chrome dan IE9 Walaupun Menggunakan CSS dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!