mirror of
https://github.com/necolas/normalize.css.git
synced 2024-12-25 15:14:19 +00:00
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:
parent
dafaf9ee60
commit
6992935807
10
normalize.css
vendored
10
normalize.css
vendored
@ -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 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user