Странная упаковка на встроенном промежутке в IE7 - PullRequest
Новая
       318

Странная упаковка на встроенном промежутке в IE7

0 голосов
/ 04 августа 2011

У меня есть следующее:

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

да, я знаю, уродливый хакер вертикального выравнивания ... что вы можете сделать ...

у кого есть решение?

1 Ответ

1 голос
/ 04 августа 2011

Проблема была с 

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

Удаление этой строки устраняет проблему (и в качестве бонуса вертикальное выравнивание все еще работает!). Удаление текста из промежутка также устранило проблему, но мне нужен был доступ к тексту, поэтому его нужно было содержать.

...