Fix legend text wrapping in IE.

[jonhurrell]

IE9-11 and Edge 12-13 can be completely fixed using box-sizing: border-box; max-width: 100%, but IE8 will still experience some issues as “the min-width property applies to content-box even if box-sizing is set to border-box” cite.
IE8-11 can be fixed using the 456 Berea St fix display: table; white-space: normal, but this fix will not work at all for Edge 12-13.

[robinwhittleton]

We have a legend style override in https://github.com/alphagov/govuk_elements/blob/master/public/sass/elements/_forms.scss#L22 already. Presumably this code would be better placed there? Also, can you link to a page on 456berastreet in the commit?

[gemmaleigh]

I think it should sit in the reset stylesheet.

I need to test this (which is why it hasn't been merged yet), ideally L22 from forms.scss would be moved into the reset stylesheet too (or removed if not required).

I'll investigate later today.

[jonhurrell]

I'd place it as a reset, it's included in normalize.
@robinwhittleton How to line wrap text in legend elements, even in IE

[gemmaleigh]

I think it really helps to see screenshots with fixes like this.

Here's a screenshot before:

Win10 Edge 13

Here's what Normalize uses to fix text wrapping in Edge and IE

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

Here's a screenshot after:

Win10 Edge13