Siehe dieses Codebeispiel: http://jsfiddle.net/Z2BMK/
Chrome / IE8 sehen so aus
Firefox sieht so aus
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 href
URL 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; }
margin: -1px
? Ist es irgendwie verbundenborder: 2px
?border-width
von der-moz-focus-inner
war1px
standardmäßig so das Schreibenborder-width
in 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 derborder-width
in Firefox die Ursache für den Unterschied, und das Hinzufügenmargin: -1px
ist die Lösung, die kompatibler ist als meine vorherige Lösung.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.Antworten:
Füge das hinzu:
http://jsfiddle.net/thirtydot/Z2BMK/1/
Das Einfügen der
border
obigen Regel ist erforderlich, damit die Schaltflächen in beiden Browsern gleich aussehen. Außerdem wird der gepunktete Umriss entfernt, wenn sich die Schaltflächeactive
in Firefox befindet. Viele Entwickler entfernen diesen gepunkteten Umriss und ersetzen ihn optional durch etwas visuell freundlicheres.quelle
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.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
file
CSS). Es tut uns leid, dass auf der Seite, auf der ich versucht habe, CSS-Konflikte aufgetreten sind. Vielen Dank.Um es auch auf Eingabeelementen zu beheben, fügen Sie hinzu
ist einfach perfekt!
quelle
input[type="file"] > input[type="button"]::-moz-focus-inner
redundant, da Sie bereits hinzugefügt habeninput[type="button"]::-moz-focus-inner
, oder ist das nicht Ihre Erfahrung? Wissen Sie?