IE7 中内联跨度的奇怪换行

Question

我有以下内容：

HTML：

<div class='container'>
 <div class='height'></div>
 <div class='valign'>
  <div class='ie'>
   <span>short text</span>
   <span>short text</span>
   <span>long text...</span>
  </div>
 </div>
</div>

CSS：

div.container{float:left;width:550px;display:table;}
div.container div.height{height:40px;}
div.container div.valign{display:table-cell;vertical-align:middle;white-space:normal;}
div.container div.valign div.ie{text-indent:-5px;}
div.container div.valign div.ie span{white-space:normal;}

IE7 特定：

div.container div.height{float:left;}
div.container div.valign{position: relative;top: 50%;white-space:normal;}
div.container div.valign div.ie{position: relative;top: -50%;white-space:normal;}
div.container div.valign,
div.container div.valign span{zoom: 1;white-space:normal;}

在 IE7 中，当带有“长文本...”的跨度的宽度大于该行上的可用空间时，它会中断到新行。所以我最终得到：

short text short text 
long text...more long text...

而不是：

short text short text long text...
more long text...

是的，我知道，丑陋的垂直对齐黑客...你能做什么...

有人有解决方案吗？

Answer 1

问题是

div.container div.valign span{zoom: 1;}

删除这一行可以解决问题（而且作为奖励，垂直对齐仍然有效！）。从跨度中删除文本也解决了问题，但我需要访问文本，因此需要将其包含在内。