<button> padding / Breite problem

Ich bin mit <button> um eine post-Anfrage in ein Formular. Ich auch gestylt, ein a.button genau wie die <button> (ich brauche die a.button einige JS-Sachen).

Der button hat eine Polsterung, eine Feste Höhe. Wenn ich geben Sie die Breite der Schaltfläche /ein Sie beide gleich Aussehen. Aber wenn ich die Breite der <button> es ignoriert die Polsterung.

Bin ich mit diesem problem in Chrome, Firefox und Opera, also denke ich es ist nicht ein rendering-Fehler. Auch gleiche Problem mit <input type="submit" />

Hier ist die grundlegende CSS:

.button, button {
    margin: 0;
    display: inline-block;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    color: black;
    background: #ddd;
    font: 12px Verdana;
    padding: 40px; /* 40px, so you can see that it won't be rendered with width */
    text-align: center;
}

HTML:

<a href="#" class="button">Some text</a>
<button>Some text</button>
<!-- Works fine till here -->
<br /><br />
<a href="#" class="button" style="width:200px">Some text</a>
<button style="width:200px">Some text</button>

Fiddle: http://jsfiddle.net/9dtnz/

Irgendwelche Vorschläge, warum der Browser ignoriert die padding? (oben und unten bei der Verwendung von Höhen - /Links und rechts bei Verwendung der Breite).

  • Das sieht gut für mich im FF 5.0
  • Es funktioniert nicht in Chrome 12 und FF4
  • seine arbeiten die richtige, die version der browser Sie verwenden?
  • Haben die beiden letzten Tasten die gleiche, outerWidth? Sie nicht in Chrome 12, FF 4 & Opera 10.5
InformationsquelleAutor js-coder | 2011-07-22
Schreibe einen Kommentar