Rumah > hujung hadapan web > tutorial css > Mengapa Imej Masih Mempunyai Sempadan dalam Chrome dan IE9, Walaupun dengan \'border: none;\'?

Mengapa Imej Masih Mempunyai Sempadan dalam Chrome dan IE9, Walaupun dengan \'border: none;\'?

Barbara Streisand
Lepaskan: 2024-11-03 14:38:30
asal
847 orang telah melayarinya

Why Do Images Still Have Borders in Chrome and IE9, Even with

Teknik Penindasan Sempadan Chrome dan IE9

Mengalih keluar sempadan yang tidak sedap dipandang yang berterusan di sekeliling imej dalam Chrome dan IE9 boleh menjadi tugas yang mengecewakan. Walaupun menetapkan sifat sempadan kepada "tiada", pelayar ini berdegil mengekalkan garisan nipis.

Potensi Punca dan Penyelesaian:

  • Pepijat Chrome: Chrome mengabaikan "border:none;" gaya, terutamanya untuk imej dengan dimensi tertentu. Untuk memintas perkara ini, tipu Chrome supaya tidak melihat kehadiran imej dengan menetapkan lebar dan ketinggian sifar, ditambah dengan nilai padding yang tepat untuk menampung saiz imej yang diingini.
  • Gelagat IE9: IE9 menambah piksel- sempadan pilihan nipis di sekeliling imej apabila imej diklik. Untuk menghapuskan perkara ini, lumpuhkan sifat "pilihan pengguna".

Contoh Pelaksanaan:

CSS untuk Chrome Bug:

<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>
Salin selepas log masuk

CSS untuk Sempadan Pemilihan IE9:

<code class="css">img {
    -ms-user-select:none;
    user-select:none;
}</code>
Salin selepas log masuk

Petua Tambahan:

  • Pastikan imej adalah tidak dibalut dengan mana-mana elemen lain dengan jidar.
  • Semak awalan vendor yang mungkin mempengaruhi penampilan jidar.
  • Cuba lumpuhkan pecutan perkakasan buat sementara waktu untuk melihat sama ada ia mempengaruhi gelagat sempadan.

Atas ialah kandungan terperinci Mengapa Imej Masih Mempunyai Sempadan dalam Chrome dan IE9, Walaupun dengan \'border: none;\'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan