CSS Button sieht in FF total anders aus wie in Chrome - woran liegt das?

[Falc410]

Knopf in Firefox:

und in Chrome:


Warum sieht der so anders aus? Ich benutze ein kostenloses HTML Theme bei dem auch eine CSS Datei dabei war die ich leicht angepasst habe. Da gibt es nur einen Eintrag für input (ist eigentlich kein Button sondern ein Form input, also input type="submit")
Im Inspektor zeigt mir FF und Chrome das gleiche an für die Basiswerte wie auf dem Screenshot zu sehen, wobei ich bei FF keinen Eintrag zum Background finden kann.

Im Chrome finde ich den und da steht auch white. Ich verstehe trotzdem nicht woher das beim FF dann kommt, also woher weiss er dass der Hintergrund eben nicht weiß sein soll. Eigentlich sollten die Buttons überall gleich aussehen.

 

[Daaron]

Schalt die Style-Analyse auf "Computed" um, dann siehst du klarer.

 

[TheLastHotfix]

Hallo,

schau mal ins CSS File, weil der Radius offenbar nicht für alle Browser definiert wurde,
sieht normaler Weise etwa so aus:

-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */

lies Dich vielleicht mal hier > hxxp://jonraasch.com/blog/css-rounded-corners-in-all-browsers < rein.

lG

 

[blablub1212]

Die Buttons auf deinen Screenshots sind die standard buttons der jeweiligen browser. Das kannst du einfach mal testen in dem du folgende HTML Datei erstellst:

<form action="#">
<input type="submit" name="Absenden" id="button">
</form>

und einfach mal in den unterschiedlichen browsern öffnest. Dann sieht der Button jedes mal leicht unterschiedlich aus.

über die ID kannst du dann den Style anpassen und der Button sieht dann in jedem Browser gleich aus. z.b. folgendes Stylesheet:

<style type="text/css">
#button {
min-height: 50px;
font-weight: 900;
border-radius: 3px;
background-color: #fff;
border: 1px solid #000;
}
</style>

Unterschiede zwischen DEFAULT und CSS:

 

[Falc410]

Danke für den Link, den lese ich mir mal durch.

Dass das wirklich der Default Button im Firefox ist kann ich mir fast nicht vorstellen, da der Hintergrund ja ein bisschen nach einem Gradient aussieht (oben Grau, unten Weiß). Wenn ich einen simplen input in FF rendern lasse sieht es zwar schon so ähnlich aus aber das müsste ich eben auch mal mit der entsprechenden Schrift und Textgröße testen. Aber wahrscheinlich liegt genau da der Hase begraben. Ich bin nicht davon ausgegangen das es sich um die Standardeinstellungen handelt, dann ist klar warum es im Chrome anders aussieht als wie im FF. Ich dachte eben das der Button im FF schon durch CSS so angepasst worden ist.

Dann versuche ich mal ein mit Hilfe des Links den Style so anzupassen das es überall gleich aussieht.