css - flex - 最大宽度不会导致文本在 IE10 中换行

Question

为什么文本在 IE10 中不换行？

body{
  background: url(http://i.imgur.com/ilgJJ1Q.gif);
  margin: 0;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  height: 80px;
}
li{
  display: flex;
}
ul a {
color: #fff;
display: flex;
-webkit-align-items: center;
align-items: center;
max-width: 240px;
padding: 12px 50px;
align-items: center;
text-transform: uppercase;
text-decoration: none;
}
li img{
  border: 0;
margin-right: 10px;
}
li span span {
display: block;
height: 2px;
margin: 7px 0 -7px;
width: 25px;
}
li:last-child{
  background: rgba(38, 46, 54, .6);
}
li:nth-child(2){ background: #a15796; }
li:nth-child(3){ background: #b48c4d; }
li:nth-child(4){ background: #3a7d7d; }

<ul class="top-level-tax">
                <li>
    <a href="#" >
        <img src="http://i.imgur.com/SRVh4os.png">
        <span>Lorem ipsum dolor<span style="background-color: #38729c;"></span></span>
    </a>
</li>
                <li>
    <a href="#" >
        <img src="http://i.imgur.com/rBM2CYr.png">
        <span>consectetur adipisicing<span style="background-color: #a05995;"></span></span>
    </a>
</li>
                <li>
    <a href="#" class="" >
        <img src="http://i.imgur.com/9dFFuH5.png">
        <span>Mollitia harum<span style="background-color: #b38c51;"></span></span>
    </a>
</li>
                <li>
    <a href="#" >
        <img src="http://i.imgur.com/7bQ73kd.png">
        <span>veritatis ea ipsa<span style="background-color: #3d7d7d;"></span></span>
    </a>
</li>
</ul>

https://jsfiddle.net/afelixj/79pybrh9/1/

Answer 1

将 max-width 添加到 span

li span{
  display: block;
  max-width: 120px;
}