表格单元格显示：内容包装在框外

Question

是否有css天才可以解释为什么会发生这种情况？我的大脑现在被烧了。

<ul class="nav">
<li>
  <a href="/home/">
    <span class="icon"></span>
    <span>This is the home page of this site</span>
  </a>
</li>
<li>
  <a href="/contact/">
    <span class="icon"></span>
    <span>This is another page</span>
  </a>
</li>
</ul>

.nav { width:280px;}
.nav li {
    display:table-cell;
    vertical-align: middle;
}
.nav a {
    white-space: nowrap;
}
.nav li a span {
    vertical-align: middle;
    display: inline-block;
    white-space: normal;

}
.nav li a span.icon {
    background: url("http://lorempixel.com/25/25/") no-repeat;
    width:25px;
    height:25px;
}

https://jsfiddle.net/0Ly8fxax/1/

必须是我，因为我在Firefox，Chrome和safari下获得相同的行为。

这个想法是有一个＆lt; ul＆gt;＆lt; li＆gt;显示li的地方：table-cell。大图是一个水平菜单，可能包裹文本，但保持图标旁边垂直居中。

内容是与white-space：nowrap的链接;所以2个子内联块保持在一起，而第二个内联块内容可以包装。

除了包裹发生在＆lt; li＆gt;

之外，它确实应该起作用

这一点基本上都是支持IE的flexbox。