Entfernen Sie zusätzliche Tastenabstände / Polster in Firefox

Siehe dieses Codebeispiel: http://jsfiddle.net/Z2BMK/

Chrome / IE8 sehen so aus

Geben Sie hier die Bildbeschreibung ein

Firefox sieht so aus

Geben Sie hier die Bildbeschreibung ein

Mein CSS ist

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

Wie kann ich das Codebeispiel ändern, um die Schaltfläche in beiden Browsern gleich zu machen? Ich möchte keine JavaScript-basierten Hyperlinks verwenden, da diese nicht mit der Leertaste auf der Tastatur funktionieren und eine hrefURL erforderlich ist, die keine saubere Methode für den Umgang mit Dingen darstellt.

Meine Lösung seit Firefox 13

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

— Bryan Field
quelle

Warum hast du hinzugefügt margin: -1px? Ist es irgendwie verbunden border: 2px?

— Dan

Siehe meine Bearbeitung. Die border-widthvon der -moz-focus-innerwar 1pxstandardmäßig so das Schreiben border-widthin den Code redundant ist, aber es macht es klar , was los ist. Möglicherweise hilft es auch bei der Zukunftssicherung. Um Ihre Frage zu beantworten, war der border-widthin Firefox die Ursache für den Unterschied, und das Hinzufügen margin: -1pxist die Lösung, die kompatibler ist als meine vorherige Lösung.

— Bryan Field

Ich denke, die akzeptierte Antwort ist visuell gleichwertig, aber besser als Ihre Lösung. Die akzeptierte Antwort entfernt von FF hinzugefügte Inhalte und sorgt dafür, dass die Darstellung in allen Browsern gleich ist. Ihre Lösung lässt an ihrer Stelle einen zusätzlichen Rand, der von FF hinzugefügt wurde, und verbirgt ein Pixel des Zwei-Pixel-Rahmens mit margin: -1px. Dies ist zu kompliziert. Es bricht ab, wenn: 1) ein Fehler in der Rendering-Engine auftritt (der auftritt), 2) Rahmen eine andere Farbe erhalten, 3) Sie zoomen. Um mögliche Probleme mit Ihrer Lösung zu demonstrieren, habe ich eine Geige vorbereitet: jsfiddle.net/Z2BMK / 455 . Bitte zoomen Sie hinein und bemerken Sie einen roten Rand.

— Dan

Der einzige Vorteil Ihrer Antwort, den ich sehen kann, ist die Beibehaltung der FF-Funktion "Gepunktete Kontur, wenn die Schaltfläche aktiv ist"

— Dan,

Ja, genau das macht meine Lösung besser. Es sollte etwas geben , das dem Benutzer sagt, wo seine Tastatur fokussiert ist.

— Bryan Field

Antworten:

164

Füge das hinzu:

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

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

Das Einfügen der borderobigen Regel ist erforderlich, damit die Schaltflächen in beiden Browsern gleich aussehen. Außerdem wird der gepunktete Umriss entfernt, wenn sich die Schaltfläche activein Firefox befindet. Viele Entwickler entfernen diesen gepunkteten Umriss und ersetzen ihn optional durch etwas visuell freundlicheres.

— dreißig Punkte
quelle

Verwenden Sie diese Option, um in Firefox ein Fokuslicht im Chrome-Stil zu verwenden button{background:/*Something here*/} button:focus{-moz-box-shadow:0 0px 3px #C80;}. Dies kompensiert das Fehlen der gepunkteten Linie und gibt die Browserkonsistenz, nach der ich gesucht habe.

— Bryan Field

Dies ist genau das, was ich brauchte. Vielen Dank!

— Abel

Um es auch auf Eingabeelementen zu beheben, fügen Sie hinzu

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

Genial! Danke dir! Das hat geholfen!

— SoWeLie

@Stefan jsfiddle.net/LjhQ5/1 Es scheint korrekt zu funktionieren (mit Ausnahme des fileCSS). Es tut uns leid, dass auf der Seite, auf der ich versucht habe, CSS-Konflikte aufgetreten sind. Vielen Dank.

— Ersatzbytes

Um es auch auf Eingabeelementen zu beheben, fügen Sie hinzu

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

ist einfach perfekt!

— Marcelo Hexsel
quelle

Haben Sie Kenntnisse über die Browserkompatibilität dieser Lösung?

— Bryan Field

Ist nicht input[type="file"] > input[type="button"]::-moz-focus-innerredundant, da Sie bereits hinzugefügt haben input[type="button"]::-moz-focus-inner, oder ist das nicht Ihre Erfahrung? Wissen Sie?

— Bryan Field

@ GeorgeBailey: Die Browserkompatibilität ist Firefox 3+. Dieser Code wirkt sich nicht auf andere Browser aus.

— Dan

@ GeorgeBailey Ich denke, diese Antwort war als Antwort auf diesen Kommentar gedacht .

— WynandB