Mengapa Imej Saya Masih Ada Sempadan dalam Chrome, Walaupun Dengan `border: none;`?

Mengalih keluar Sempadan Imej dalam Chrome

Satu isu yang kerap dihadapi apabila bekerja dengan imej dalam Chrome dan IE9 ialah penampilan sempadan nipis yang berterusan di sekeliling imej, walaupun menyatakan 'garis besar: tiada;' dan 'sempadan: tiada;' dalam CSS. Untuk menyelesaikan isu ini, pertimbangkan pendekatan berikut:

Chrome Bug Circumvention

Chrome mempunyai pepijat yang diketahui yang mengabaikan "border: none;" gaya. Untuk mengatasi masalah ini, gunakan blok id CSS berikut untuk mencipta kawasan lutsinar dengan pelapik yang diingini, dengan berkesan memperdaya Chrome untuk berfikir bahawa tiada imej:

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

Penduaan Gaya

Penyelesaian lain ialah untuk menduplikasi gaya penyingkiran sempadan dan menggariskan, dalam CSS dan melalui atribut border=0 jQuery. Pendekatan berlebihan ini kadangkala boleh memaksa penyemak imbas untuk menggunakan gaya dengan betul.

<code class="css">img, a img {
    outline: none;
    border: none;
}</code>

<code class="js">$(document).ready(function(){
    $('img').attr('border', '0');
});</code>

Pertimbangan Tambahan

Pastikan bahawa dimensi fail imej sepadan dengan lebar dan tinggi yang ditentukan dalam CSS. Jika terdapat percanggahan, penyemak imbas boleh menambah jidar untuk mengimbangi.

Dengan melaksanakan penyelesaian ini, anda boleh mengalih keluar sempadan imej yang tidak diingini dalam Chrome dan IE9 dengan berkesan, memberikan penampilan yang konsisten dan menarik secara visual untuk halaman web anda .

Atas ialah kandungan terperinci Mengapa Imej Saya Masih Ada Sempadan dalam Chrome, Walaupun Dengan `border: none;`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!