html - table-cell は IE9 で単語を分割しません

Question

http://jsfiddle.net/Y7NAR/2/を見てください。

display: table-cell; max-width:100px; word-wrap:break-word;Chrome では正常に動作しますが、IE9 では単語が壊れません。

解決策はありますか？

Answer 1

CSS で次のことを試してください。

#cntnr .section {
    display: table-cell;
    background: #fcc;
    text-align: center;
    max-width:100px;
    -ms-word-break: break-all;
    word-wrap:break-word;
}

参照: http://msdn.microsoft.com/en-us/library/ie/ms531184%28v=vs.85%29.aspx \

フィドルの更新: http://jsfiddle.net/audetwebdesign/BwaMt/