Köprü görüntülerinin etrafındaki anahattı nasıl kaldırabilirim?

CSS kullanarak Metin Değiştirmeyi kullandığımızda ve negatif bir test girintisi, yani text-indent:-9999px. Daha sonra bu bağlantıya tıkladığımızda aşağıdaki örnek görseldeki gibi Noktalı çizgi belirir. Bunun çözümü nedir?

Bağlantı etiketi taslağını kaldırmak için

a {outline : none;}

Görüntü bağlantısından ana hatları kaldır

a img {outline : none;}

Resim bağlantısından kenarlığı kaldır

img {border : 0;}

Bağlantı öğesinde CSS özelliği "anahat" ve "yok" değerini kullanabilirsiniz.

a {
outline: none;
}

Umarım yardımcı olur.

Internet Explorer 9 için:

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

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

Odak stillerinin bir nedenden ötürü bulunduğunu lütfen unutmayın: Bunları kaldırmaya karar verirseniz, yalnızca klavye aracılığıyla gezinen kişiler artık neyin odakta olduğunu bilmiyorlar, bu nedenle web sitenizin erişilebilirliğine zarar veriyorsunuz.

(Bunları yerinde tutmak, farelerini kullanmayı sevmeyen deneyimli kullanıcılara da yardımcı olur)

Firefox ve Internet Explorer'da (IE) aynı sınır efekti vardır, bir bağlantıya tıkladığınızda görünür hale gelir.

Bu kod yalnızca IE'yi düzeltir:

a:active { outline: none; }.

Ve bu hem Firefox hem de IE'yi düzeltir :

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

Sitenizden bağlantı kenarlıklarını kaldırmak istiyorsanız, son kod stil sayfanıza eklenmelidir.

bu kodu stil sayfanıza ekleyin

img {border : 0;}

a img {outline : none;}

Umarım bu bazılarınız için yararlıdır, bağlantılardan, resimlerden ve flash'tan ve MSIE 9'dan anahatları kaldırmak için kullanılabilir:

    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 */
    }

Aşağıdaki kod, görüntü kenarlığını gizleyebilir:

    img {
    border: 0;
    }

Firefox 3.6.8'i desteklemek istiyor, ancak Firefox 4'ü desteklemiyorsanız ... Bir input type = image üzerine tıklamak da noktalı bir çerçeve oluşturabilir, firefox'un eski sürümlerinde onu kaldırmak için aşağıdakiler işe yarayacaktır:

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

IE 9, sayfalarınızın arasına ve arasına bu meta etiketi eklemediğiniz sürece, bazı durumlarda bağlantıların etrafındaki noktalı anahatları kaldırmaya izin vermez:

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

Bu, Google Chrome'da çalışan en sonuncusu

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

-moz-user-focus: ignore; Gecko tabanlı tarayıcılarda (nasıl uygulandığına bağlı olarak ihtiyacınız olabilir!

HTML 4.01 için Bunun Gibi Kullanın

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

overflow:hiddenMetni girintili özelliğe koyabilirsiniz ve sayfanın dışına yayılan bu noktalı çizgi kaybolacaktır.

Ana hatları hep birlikte kaldırmayla ilgili birkaç gönderi gördüm. Sitenin erişilebilirliğini azaltabileceğiniz için bunu yaparken dikkatli olun.

a:active { outline: none; }

Ben şahsen bu özniteliği kullanırdım, sanki :hoveröznitelik aynı css özelliklerine sahipmiş gibi, gezinme için klavyeyi kullanan kişiler için ana hatların gösterilmesini engelleyecektir.

Umarız bu sorununuzu çözer.

Noktalı Anahat href bağlantısını kaldırmak için css dosyanıza yazabilirsiniz:

a {
   outline: 0;
}

Bahse girerim çoğu kullanıcı klavyeyi gezinme kontrolü olarak kullanan kullanıcı tipi değildir. Klavyeyle gezinmeyi tercih eden küçük bir grup için kullanıcılarınızın çoğunu rahatsız etmek kabul edilebilir mi? Kısa cevap - kullanıcılarınızın kim olduğuna bağlıdır.

Ayrıca bu deneyimi Firefox ve Safari'de aynı şekilde görmüyorum. Yani bu argüman çoğunlukla IE'ye yönelik gibi görünüyor. Her şey gerçekten kullanıcı tabanınıza ve onların bilgi düzeyine - siteyi nasıl kullandıklarına bağlıdır.

Gerçekten nerede olduğunuzu bilmek istiyorsanız ve bir klavye kullanıcısıysanız, siteyi tuşlarken her zaman durum çubuğuna bakabilirsiniz.

Bu benim için mükemmel çalışıyor

a img {border:none;}

Bağlantısı olan herhangi bir görüntünün, daha eski tarayıcılarla bağlantı olduğunu belirtmeye yardımcı olmak için görüntünün çevresinde bir kenarlığı olacaktır. IMG HTML etiketinize border = "0" eklemek, o resmin resmin etrafında bir çerçeveye sahip olmasını önleyecektir.

Ancak, her görüntüye border = "0" eklemek sadece zaman alıcı olmakla kalmaz, aynı zamanda dosya boyutunu ve indirme süresini de artırır. Resimlerinizden hiçbirinin kenarlık olmasını istemiyorsanız, içinde aşağıdaki kodun bulunduğu bir CSS kuralı veya CSS dosyası oluşturun.

img {border-style: yok; }

Bunun hala bu kişi için bir sorun olup olmadığından emin değilim, ancak genel olarak birçok insan için bir acı olabileceğini biliyorum. Verilen yukarıdaki çözümler çalışacak bazı durumlarda, ancak, örneğin, WordPress gibi bir CMS kullanarak eğer ve anahatlarını bir eklenti veya tema biri tarafından üretiliyor, büyük olasılıkla olacak değil bu konunun bağlı olarak çözmüş CSS'yi nasıl ekliyorsunuz.

Ayrı bir StyleSheet (örneğin, ' Lazyest StyleSheet ' eklentisini kullanın) ve mevcut eklenti (veya tema) zorlamalı stili geçersiz kılmak için içine aşağıdaki CSS'yi girmenizi öneririm:

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

Belirli kurala ' ! Önemli ' eklemek , kural başka bir yerde olsa bile (bir eklenti, tema vb.) Bunu oluşturmak için bir öncelik haline getirecektir.

Bu, geliştirme sırasında zamandan tasarruf etmenize yardımcı olur. Elbette, orijinal kaynağı araştırabilirsiniz, ancak birçok proje üzerinde çalışırken veya güncelleme yapmanız gerektiğinde (değişikliklerinizin geçersiz kılınabileceği [ önerilmiyor! ]) Veya yeni eklentiler veya temalar eklediğinizde, bu en iyisidir zaman kazanmak için başvuru.

Umarım bu yardımcı olur ... Barış!

Yukarıdaki çözüm kimse için işe yaramazsa. Bunu da bir dene

a {
 box-shadow: none;
}

Evet kullanabiliriz. CSS sıfırlama a {outline:none}ve ayrıca

a:focus, a:active {outline:none} CSS'yi Sıfırlamada En İyi Uygulama için En İyi Çözüm ortak kullanmaktır :focus{outline:none}Hala En İyi Seçeneğiniz varsa lütfen Paylaşın