Fix fieldset width in Chrome and Firefox

Fixes an issue in Firefox [1] and Chrome [2]. The implicit width of
`fieldset` can be determined by the width of descendants rather than the
parent container. This change (adding `min-width:0`) makes the
`fieldset` behave like a `div` in this regard.

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=504622
[2] http://stackoverflow.com/questions/8084343/google-chrome-fieldset-overflow-bug

Close #272
This commit is contained in:
thoppe 2014-01-12 12:56:12 +01:00 committed by Nicolas Gallagher
parent dafaf9ee60
commit 6992935807
2 changed files with 13 additions and 4 deletions

10
normalize.css vendored
View File

@ -257,13 +257,15 @@ figure {
========================================================================== */ ========================================================================== */
/** /**
* Define consistent border, margin, and padding. * 1. Define consistent border, margin, and padding.
* 2. Address width being affected by wide descendants in Chrome and Firefox.
*/ */
fieldset { fieldset {
border: 1px solid #c0c0c0; border: 1px solid #c0c0c0; /* 1 */
margin: 0 2px; margin: 0 2px; /* 1 */
padding: 0.35em 0.625em 0.75em; min-width: 0; /* 2 */
padding: 0.35em 0.625em 0.75em; /* 1 */
} }
/** /**

View File

@ -268,6 +268,13 @@
<h1>Forms</h1> <h1>Forms</h1>
<form> <form>
<div style="width:500px;">
<fieldset>
<legend>Fieldset with a wider child</legend>
<div style="width:600px; height:50px; background:red;"></div>
</fieldset>
</div>
<fieldset> <fieldset>
<legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend> <legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend>
<p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p> <p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p>