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;}

删除此行可修复问题（作为奖励，垂直对齐仍可正常工作！）。从span中删除文本也解决了问题，但我需要访问文本，因此需要包含它。

在IE7中内联跨度奇怪的包装

1 个答案: