Fix IE9 legend text wrapping #100

necolas opened this Issue Jun 24, 2012 · 18 comments


None yet

7 participants

necolas commented Jun 24, 2012

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 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.

reecekol commented Dec 2, 2012

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 commented Dec 2, 2012

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

Looks like Roger at 456bereastreet has done some work on this as well:

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

reecekol commented Dec 4, 2012

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

necolas commented Dec 4, 2012

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

reecekol commented Dec 6, 2012

margin and padding work fine here ?

reecekol commented Dec 6, 2012

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

@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:

reecekol commented Dec 9, 2012

Thanks for clarifying

necolas commented Nov 11, 2013

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).


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-boxcite.

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.

@jonathantneal jonathantneal self-assigned this Mar 16, 2016

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+:


Hum, I like the idea of dropping IE8. Most mayor libraries/frameworks are heading that way.

On the other hand, many companies (like the one I work for) stil need to support it.

Could we open an issue to discuss IE8 deprecation in v4?


I addressed the issue here #482 (comment) - I’m not dropping IE8 support in v4. I’d love to, but I think it’s just too selfish at this time.


Fair enough! And I agree in most parts.

Going back to the topic, it would be weird not to solve the issue on IE8 if we are claiming to support it, but at the same time I don't think the code needed to fix this in all browsers is something we want in our code-base... considering that the use-case is unusual.

Maybe we could be pragmatic and patch IE9-11 & Edge 12-13, and document the fix needed for IE8.

I don't have a strong opinion here, so I would like to hear more feedback. 😃


A PR has been made to resolve this in all affected, supported browsers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment