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

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ul.sample {
    display:table;
    margin:0;
    padding:0;
    width:300px;
    list-style:none;
}
 
    ul.sample li {
        display:table-cell;
        word-wrap:break-word;
        word-break:break-all;
    }
IE8～IE11以外の場合
（正常に表示されている例）
IE8～IE11の場合
（不具合がある例）

原因

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

解決策

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul.sample {
    display:table;
    margin:0;
    padding:0;
    width:300px;
    list-style:none;
}
 
    ul.sample li {
        display:table-cell;
        word-wrap:break-word;
        word-break:break-all;
        width:150px;
    }