From 7ffe1ec1350238377ac71fc80d090f0ad41b5104 Mon Sep 17 00:00:00 2001 From: thoppe Date: Sun, 12 Jan 2014 12:56:12 +0100 Subject: [PATCH 1/2] Remove intrinsic min-width of fieldset At least Firefox [1] and Chrome [2] have a legacy/ intrinsic min-width for the fieldset element. This removes it. The fix is especially useful on mobile. [1] https://bugzilla.mozilla.org/show_bug.cgi?id=504622 [2] http://stackoverflow.com/questions/8084343/google-chrome-fieldset-overflow-bug --- normalize.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/normalize.css b/normalize.css index c2de8df94..fbf31d418 100644 --- a/normalize.css +++ b/normalize.css @@ -257,13 +257,15 @@ figure { ========================================================================== */ /** - * Define consistent border, margin, and padding. + * 1. Define consistent border, margin, and padding. + * 2. Remove browser intrinsic min-width. */ fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + border: 1px solid #c0c0c0; /* 1 */ + margin: 0 2px; /* 1 */ + min-width: 0; /* 2 */ + padding: 0.35em 0.625em 0.75em; /* 1 */ } /** From 53aecd1d3562d60c8bfe147c082b9f8c952960fe Mon Sep 17 00:00:00 2001 From: thoppe Date: Tue, 14 Jan 2014 23:17:43 +0100 Subject: [PATCH 2/2] Copied parts of the input-demo into a specific test for the `min-width: 0` rule. Test with for example with Chrome by making the window as narrow as possible. --- test.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/test.html b/test.html index c90099163..eaa7b7d0f 100644 --- a/test.html +++ b/test.html @@ -307,6 +307,11 @@

Forms

+
+ Fieldset Without min-width +

+
+
Clickable inputs and buttons