Fix IE9 legend text wrapping

[necolas]

IE9 doesn't wrap legend text.

A quick look for a solution shows that adding max-width: 100% will cause IE9 to wrap text.

Need to do some tests to understand the impact of adding that declaration, e.g., people being caught out if they try to style the legend element and modify other box-model properties. Also check to see if there is an alternative fix that is cleaner.

[i-like-robots]

I have found it is not sensible to style the legend element directly and did some work to try and normalise it so that any child elements could be styled without unexpected layout problems. I went with setting width:100% and explored some other properties for Gecko and WebKit. I could dig out the tests I made.

https://github.com/i-like-robots/WebsiteBase/blob/dev/assets/less/lib/normalize.less#L176

[reecekol]

I found a couple fixes for this however all of them seem to call for adding conditional statement so that other browsers aren't affected by the rules. Thoughts?

[necolas]

conditional comments aren't an option i'm afraid.

[teddyzetterlund]

Looks like Roger at 456bereastreet has done some work on this as well: http://www.456bereastreet.com/archive/201210/how_to_line_wrap_text_in_legend_elements_even_in_ie/

Doesn't look like a solution suited for Normalize though 😟

[reecekol]

How would setting the width as 100% affect other box model properties ?

[necolas]

Try adding some padding or border to an element with width:100%

[reecekol]

margin and padding work fine here ?

[necolas]

@reecekol see http://jsfiddle.net/ASAsn/

[reecekol]

I see what you are saying here but you could just increase the width of the container if you were a developer working on this.So i guess we are holding on this then? I will keep looking around for a solution.Thanks

[i-like-robots]

@reecekol You seem to be misunderstanding how the (content) box model is calculated. Take a read through the following links and take a look at @necolas's demo again:

• http://css-tricks.com/the-css-box-model/
• https://gist.github.com/2986528
• http://www.w3.org/TR/CSS2/box.html

[reecekol]

Thanks for clarifying

[necolas]

From #209

Text in legend under IE 10 doesn't wrap (and it was suppose to be so 'modern' browser, I haven't tested in 9 & 8). 'display: table' and 'white-space: normal' seem to do the trick and does not affect other browsers (tested under latest FF/Opera/Chrome and Safari 5 Win).

[jonathantneal]

Bad news: This bug persists in Edge. Good News: It can be fixed! Also, few people report it.

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.

Both can be combined for complete coverage:

legend {
  box-sizing: border-box; /* IE9-11 & Edge 12-13 */
  display: table; /* IE8-11 */
  max-width: 100%; /* Patch for IE9-11 & Edge 12-13 */
  white-space: normal; /* IE8-11 */
}

That’s pretty horrid CSS. Moving forward for Normalize.css v4, I believe either IE8 support should be dropped or the Berea fix should be omitted (and then mentioned in extended detail notes). Many websites override box-sizing to be border-box these days, so the IE/Edge fix seems most reasonable.

[cvrebert]

Moving forward for Normalize.css v4, I believe either IE8 support should be dropped or the Berea fix should be omitted

You'd be in good company in dropping IE8 support. e.g. Both Bootstrap and Foundation require IE9+:

• http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#supporting-internet-explorer-8
• http://foundation.zurb.com/sites/docs/compatibility.html