<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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sehr seltsam, ich habe gesehen, mein Chrome hat ein
box-sizing: border-box;
Regel für input-Elemente, also die Polsterung ist enthalten in der Breite...So zu vermeiden, dass nur angeben
box-sizing: content-box;
(einige kann man mit dem Präfix notwendig).-webkit-box-sizing: initial
hat den jobbox-sizing: content-box;
Es sieht gut zu mir, so könnte es eine style-sheet-Konflikt Problem. Versuchen Sie es mit !wichtig zu überschreiben, was auch immer es sein mögen, und das könnte Ihr problem lösen.
Hoffe, das hilft.
Michael.