Correct wrapping not present in IE8/9/10/11 and Edge 12/13

Jonathan Neal · Jonathan Neal · commit cbdd0b168330 · 2016-03-17T21:41:39.000-04:00
diff --git a/normalize.css b/normalize.css
@@ -388,13 +388,18 @@ fieldset {
 }
 
 /**
- * 1. Correct `color` not being inherited from fieldset in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ * 1. Correct wrapping not present in IE8/9/10/11 and Edge 12/13.
+ * 2. Correct `color` not being inherited from fieldset in IE 8/9/10/11.
+ * 3. Remove padding so people aren't caught out if they zero out fieldsets.
  */
 
 legend {
-  color: inherit; /* 1 */
-  padding: 0; /* 2 */
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
 }
 
 /**
diff --git a/test.html b/test.html
@@ -437,6 +437,12 @@ <h3 class="Test-it">should not have padding</h3>
       <legend>legend</legend>
     </fieldset>
   </div>
+  <h3 class="Test-it">should wrap text</h3>
+  <div class="Test-run">
+    <fieldset>
+      <legend>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</legend>
+    </fieldset>
+  </div>
 
   <h2 class="Test-describe"><code>textarea</code></h2>
   <h3 class="Test-it">should not have a scrollbar unless overflowing</h3>
