How can I make <legend> text wrap?

Adding white-space: normal; to the legend works fine except in IE7 and IE6. Please see this jsfiddle demo

After playing around a bit with the CSS, I got it work on IE7, IE8, IE9, FF3-4, and Chrome11 by adding a <span> inside the <legend> with the below CSS:

legend {
    white-space: normal; 
    width: 100%;
    *margin-left: -7px;
}
legend span {
    display:block;
    width: 100%;
}

Please have a look at this jsfiddle

It's been a while since the question was posted, but now IE10 is here for some time and still sux while beeing so 'modern'. additionally one has no ability to use conditional comment. Here's what does the trick:

legend {
  white-space: normal;
  display: table; /* IE10 */
}