Firefox'ta fazladan düğme aralıklarını / dolguyu kaldırın

Bu kod örneğine bakın: http://jsfiddle.net/Z2BMK/

Chrome / IE8 şuna benzer

görüntü açıklamasını buraya girin

Firefox buna benziyor

görüntü açıklamasını buraya girin

CSS'm

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

Düğmeyi her iki tarayıcıda da aynı yapmak için kod örneğini nasıl değiştirebilirim? JavaScript tabanlı köprüler kullanmak istemiyorum çünkü klavyede boşluk çubuğuyla çalışmıyorlar ve işleri hrefhalletmek için temiz bir yol olmayan bir URL'ye sahip olması gerekiyor.

Çözümüm, Firefox 13'ten beri

button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }

— Bryan Field
kaynak

Neden ekledin margin: -1px? Bir şekilde bağlantılı mı border: 2px?

— Dan

Düzenlememe bakın. border-widthArasında -moz-focus-innerolduğu 1pxyazı, böylece varsayılan olarak border-widthkoduna gereksiz, ama daha ne olup bittiğini temizleyin yapar. Geleceğe hazırlamada da yardımcı olabilir. Sorunuzu yanıtlamak için, border-widthFirefox'ta farkın nedeni vardı ve margin: -1pxönceki çözümümden daha uyumlu olan çözüm eklemek .

— Bryan Alan

Kabul edilen cevabın görsel olarak eşdeğer, ancak çözümünüzden daha iyi olduğunu düşünüyorum. Kabul edilen yanıt, FF tarafından eklenen öğeleri kaldırır ve her şeyin tüm tarayıcılarda aynı şekilde görüntülenmesini sağlar. Çözümünüz, yerine FF tarafından eklenen fazladan bir sınır bırakır ve kullanarak bir piksel iki piksellik kenarlığı gizler margin: -1px. Bu çok karmaşık. Aşağıdaki durumlarda bozulur: 1) Oluşturma motorunda bir hata oluşursa (bu olur), 2) Sınırlar farklı renk alırsa , 3) Yakınlaştırırsanız. Çözümünüzle ilgili olası sorunları göstermek için bir keman hazırladım: jsfiddle.net/Z2BMK / 455 . Lütfen yakınlaştırın ve kırmızı bir kenarlığın belirdiğini fark edin.

— Dan

"Butonu aktif olduğunda Noktalı" cevap I can see sadece avantaj FF korunması olduğunu işlevsellik

— Dan

Evet, çözümümü daha iyi yapan da budur. Kullanıcıya klavyesinin nereye odaklandığını söyleyen bir şey olmalıdır .

— Bryan Alan

Yanıtlar:

164

Bunu ekle:

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

http://jsfiddle.net/thirtydot/Z2BMK/1/

borderYukarıdaki kuralın dahil edilmesi , düğmelerin her iki tarayıcıda da aynı görünmesi için gereklidir, ancak aynı zamanda düğme activeFirefox'tayken noktalı dış çizgiyi de kaldırır . Pek çok geliştirici bu noktalı anahattan kurtulur ve isteğe bağlı olarak onu görsel olarak daha kolay bir şeyle değiştirir.

— otuz nokta
kaynak

Firefox'ta Chrome tarzı bir odak ışıltısı kullanmak için kullanın button{background:/*Something here*/} button:focus{-moz-box-shadow:0 0px 3px #C80;}. Bu, noktalı çizgiye sahip olmamayı telafi ediyor ve peşinde olduğum tarayıcı tutarlılığını sağlıyor.

— Bryan Saha

GERÇEKTEN ihtiyacım olan şey bu. Teşekkürler!

— Abel

Giriş öğelerinde de düzeltmek için ekleyin

input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner

— Stefan

Harika! Teşekkür ederim! Bu yardımcı oldu!

— SoWeLie

@Stefan jsfiddle.net/LjhQ5/1 Düzgün çalışıyor gibi görünüyor ( filecss hariç ). Maalesef, yapmaya çalıştığım sayfada çelişkili css olmalı. Teşekkürler.

— sparebytes

Giriş öğelerinde düzeltmek için ekleyin

input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner

basit, mükemmel!

— Marcelo Hexsel
kaynak

Bu çözümün tarayıcı uyumluluğu hakkında herhangi bir bilginiz var mı?

— Bryan Saha

input[type="file"] > input[type="button"]::-moz-focus-innerZaten eklediğinizden beri gereksiz değil mi input[type="button"]::-moz-focus-inner, yoksa bu sizin deneyiminiz değil mi? Biliyor musun?

— Bryan Tarla

@GeorgeBailey: tarayıcı uyumluluğu Firefox 3+, bu kod diğer tarayıcıları etkilemez.

— Dan

@GeorgeBailey Sanırım bu yanıt, bu yoruma bir yanıt olarak düşünüldü .

— WynandB