molily: relative Breite von <button>

Beitrag lesen

SELF-Forum

relative Breite von <button>

molily
– Informationen zu den Bewertungsregeln

Ist doch ganz klar: der Button hat width:100%, dazu noch die bei Button übliche Border (+evtl. padding) - und mit dem default für overflow (visible) ergibt sich logischerweise das Überhängen rechts.

Das kann ich in keinem Browser bestätigen. Standard schein zu sein, dass für button und input so etwas wie box-sizing: border-box gilt. (Wenn nicht, wäre das die Lösung. Mit Vendor-Prefixes, sofern nötig.) Formularfelder sind ja zumindest gemäß CSS 2.1 replaced inline elements, auf die das konventionelle Box-Modell nicht zutrifft.

<!DOCTYPE html>  
<style>  
[code lang=css]div { width: 400px; background: red; padding: 20px 0; }  
button, input { width: 100%; padding: 10px; border: 10px solid blue; font: 16px sans-serif; }

</style>
<div>
<button type="button">Foo</button>
<input type="button" value="Foo">
</div>[/code]

Hier hängt in keinem Browser etwas über (IE < 8 habe ich allerdings nicht getestet).

Kontrolle auch so möglich:

<script>  
[code lang=javascript]alert(document.getElementsByTagName('button')[0].offsetWidth);

</script>[/code]

Ergibt 400, nicht 440.

Mathias

Beitrag melden
–
Informationen zu den Bewertungsregeln