Bagaimana cara menghapus garis luar di sekitar gambar hyperlink?

Saat kita menggunakan Text Replacement menggunakan CSS dan memberikan test-indent negatif yaitu text-indent:-9999px. Kemudian ketika kita mengklik tautan itu, garis Putus-putus muncul seperti pada contoh gambar di bawah ini. Apa solusinya?

Untuk Hapus garis besar untuk tag jangkar

a {outline : none;}

Hapus garis dari link gambar

a img {outline : none;}

Hapus batas dari link gambar

img {border : 0;}

Anda dapat menggunakan properti CSS "garis besar" dan nilai "tidak ada" pada elemen tautan.

a {
outline: none;
}

Semoga membantu.

Untuk Internet Explorer 9:

a:active, a:focus { 
 outline: none; 
 ie-dummy: expression(this.hideFocus=true);
}

Sumber: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a

Harap perhatikan bahwa gaya fokus ada karena suatu alasan: jika Anda memutuskan untuk menghapusnya, orang yang bernavigasi melalui keyboard tidak lagi tahu apa yang ada dalam fokus, jadi Anda merusak aksesibilitas situs web Anda.

(Menjaga mereka tetap di tempatnya juga membantu pengguna yang tidak suka menggunakan mouse mereka)

Ada efek perbatasan yang sama di Firefox dan Internet Explorer (IE) , itu menjadi terlihat ketika Anda mengklik beberapa tautan.

Kode ini hanya akan memperbaiki IE:

a:active { outline: none; }.

Dan yang ini akan memperbaiki Firefox dan IE :

:active, :focus { outline: none; -moz-outline-style: none; }

Kode terakhir harus ditambahkan ke stylesheet Anda, jika Anda ingin menghapus batas tautan dari situs Anda.

sertakan kode ini di lembar gaya Anda

img {border : 0;}

a img {outline : none;}

Saya harap ini bermanfaat bagi sebagian dari Anda, ini dapat digunakan untuk menghapus garis besar dari tautan, gambar dan flash dan dari MSIE 9:

    a, a:hover, a:active, a:focus, a img, object, embed {
    outline: none;
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
    }

Kode di bawah ini dapat menyembunyikan batas gambar:

    img {
    border: 0;
    }

Jika Anda ingin mendukung Firefox 3.6.8 tetapi bukan Firefox 4 ... Mengeklik input type = gambar juga dapat menghasilkan garis putus-putus, untuk menghapusnya di versi lama firefox, trik berikut ini akan dilakukan:

   input::-moz-focus-inner { 
   border: 0; 
   }

Dalam beberapa kasus, IE 9 tidak mengizinkan untuk menghapus garis putus-putus di sekitar tautan kecuali Anda menyertakan tag meta ini di antara dan di laman Anda:

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

Ini adalah yang terbaru yang berfungsi di Google Chrome

:link:focus, :visited:focus {outline: none;}

-moz-user-focus: ignore; di peramban berbasis Gecko (Anda mungkin perlu! penting, tergantung bagaimana penerapannya)

Gunakan Seperti Ini untuk HTML 4.01

<img src="image.gif" border="0">

Anda dapat menempatkan overflow:hiddenproperti dengan indentasi teks, dan garis putus-putus itu, yang membentang di luar halaman, akan menghilang.

Saya telah melihat beberapa posting tentang menghapus garis besar semuanya. Berhati-hatilah saat melakukan ini karena Anda dapat menurunkan aksesibilitas situs.

a:active { outline: none; }

Saya pribadi hanya akan menggunakan atribut ini, seolah-olah :hoveratribut tersebut memiliki properti css yang sama, ini akan mencegah tampilan garis besar untuk orang yang menggunakan keyboard untuk navigasi.

Semoga ini menyelesaikan masalah Anda.

untuk Menghapus link href Garis Bertitik-titik yang dapat Anda tulis di file css Anda:

a {
   outline: 0;
}

Saya berani bertaruh sebagian besar pengguna bukanlah tipe pengguna yang menggunakan keyboard sebagai kontrol navigasi. Apakah kemudian dapat diterima untuk mengganggu sebagian besar pengguna Anda untuk grup kecil yang lebih suka menggunakan navigasi keyboard? Jawaban singkat - tergantung pada siapa pengguna Anda.

Selain itu, saya tidak melihat pengalaman ini dengan cara yang sama di Firefox dan Safari. Jadi argumen ini tampaknya sebagian besar untuk IE. Itu semua sangat tergantung pada basis pengguna Anda dan tingkat pengetahuan mereka - bagaimana mereka menggunakan situs ini.

Jika Anda benar-benar ingin tahu di mana Anda berada dan Anda adalah pengguna keyboard, Anda selalu dapat melihat bilah status saat Anda memasukkan kunci melalui situs.

Ini bekerja dengan sempurna untuk saya

a img {border:none;}

Gambar apa pun yang memiliki tautan akan memiliki batas di sekeliling gambar untuk membantu menunjukkan bahwa itu adalah tautan dengan browser lama. Menambahkan border = "0" ke tag HTML IMG Anda akan mencegah gambar tersebut memiliki bingkai di sekeliling gambar.

Namun, menambahkan border = "0" ke setiap gambar tidak hanya memakan waktu, tetapi juga akan meningkatkan ukuran file dan waktu download. Jika Anda tidak ingin gambar Anda memiliki bingkai, buat aturan CSS atau file CSS yang memiliki kode di bawah ini.

img {border-style: none; }

Saya tidak yakin apakah ini masih menjadi masalah bagi individu ini, tetapi saya tahu ini bisa menjadi masalah bagi banyak orang secara umum. Memang, solusi di atas akan berfungsi dalam beberapa kasus, tetapi jika Anda, misalnya, menggunakan CMS seperti WordPress, dan garis besar dibuat oleh plugin atau tema, kemungkinan besar masalah ini tidak akan teratasi, bergantung pada bagaimana Anda menambahkan CSS.

Saya sarankan memiliki StyleSheet terpisah (misalnya, gunakan plugin ' Lazyest StyleSheet '), dan masukkan CSS berikut di dalamnya untuk mengganti gaya yang dipaksakan plugin (atau tema):

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

Menambahkan ' ! Penting ' ke aturan tertentu akan menjadikan ini prioritas untuk dibuat meskipun aturan mungkin ada di tempat lain (baik itu di plugin, tema, dll.).

Ini membantu menghemat waktu saat berkembang. Tentu, Anda dapat menggali sumber aslinya, tetapi ketika Anda mengerjakan banyak proyek, atau perlu melakukan pembaruan (di mana perubahan Anda dapat diganti [ tidak disarankan! ]), Atau menambahkan plugin atau tema baru, ini adalah yang terbaik jalan lain untuk menghemat waktu.

Semoga ini bisa membantu ... Damai!

Jika solusi di atas tidak berhasil untuk siapa pun. Cobalah ini juga

a {
 box-shadow: none;
}

Ya, kita bisa menggunakan. CSS reset sebagai a {outline:none}dan juga

a:focus, a:active {outline:none} untuk Praktik Terbaik dalam Menyetel Ulang CSS, Solusi Terbaik menggunakan yang biasa :focus{outline:none}Jika Anda masih memiliki Opsi Terbaik, silakan Bagikan