为什么文本没有包装在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>
&#13;
答案 0 :(得分:1)
将max-width
添加到范围
li span{
display: block;
max-width: 120px;
}
答案 1 :(得分:0)
您需要在flex-wrap: wrap;
上添加<ul>
,以指定您希望其包装其内容。