Bagaimana untuk Alih Keluar Sempadan Imej yang Tidak Diingini dalam Chrome dan IE9?

Mengalih keluar Sempadan Imej dalam Chrome dan IE9

Salah satu cabaran apabila mereka bentuk untuk web ialah memastikan persembahan visual yang konsisten merentas penyemak imbas yang berbeza. Walau bagaimanapun, isu tertentu boleh timbul, seperti kemunculan sempadan yang tidak diingini di sekeliling imej dalam Chrome dan IE9.

Untuk menghapuskan sempadan ini, anda mungkin telah cuba menggunakan sifat CSS seperti garis besar: tiada dan sempadan: tiada, tetapi tidak berjaya. Ini kerana Chrome mempunyai pepijat yang diketahui yang mengabaikan sempadan: tiada gaya.

Kunci untuk menyelesaikan isu ini ialah memperdaya Chrome agar menganggap imej itu tidak mempunyai dimensi. Mencipta elemen dengan lebar dan ketinggian 0px dan kemudian menambahkan padding yang sesuai untuk mengimbangi saiz imej yang diingini akan mencapainya.

Berikut ialah contoh blok CSS untuk melaksanakan penyelesaian ini:

<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>

Kaedah ini berkesan menghapuskan garis besar dan jidar dalam Chrome sambil mengekalkan saiz imej yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Alih Keluar Sempadan Imej yang Tidak Diingini dalam Chrome dan IE9?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!