css - 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...

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

谁有解决办法？

Answer 1

问题出在

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

删除此行可以解决问题(作为奖励，垂直对齐仍然有效!)。从 span 中删除文本也解决了问题，但我需要访问文本，因此需要包含它。