IE8～IE11でdisplay:table-cell内の連続したハイフンが折り返されない

display:table-cell内の連続したハイフン「ー」と「-」がIE8～IE11で折り返されない現象が発生します。

IE8～IE11以外の場合 （正常に表示されている例）
IE8～IE11の場合 （不具合がある例）

原因

display:table-cell;とハイフンの組み合わせで起こる現象です。

解決策

max-widthを%以外の単位で指定することで解決することができます。