Плавающий блок IE7 с переполнением многоточия, сдвинутым вниз по странице

Я вижу проблему в IE7 с перемещением некоторого содержимого блока влево с длинным текстом, который я хотел бы растянуть (или вырезать) вправо, все внутри контейнера с ограниченной шириной:

<!DOCTYPE html>
<html>
  <head>
    <title>IE7 Float Test</title>
    <style>
      .container {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .floater {
        width: 20px;
        height: 20px;
        float: left;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="floater"></div>
      <span class="text">This is some long long long long long long text I want on the same line.</span>
    </div>
  </body>
</html>

В IE8 + и любом другом браузере длинный текст правильно выравнивается с многоточием справа от плавающего элемента. В IE7 текстовый диапазон помещается под плавающий элемент и имеет там многоточие. Есть ли способ сохранить это в той же строке, что и плавающий элемент в IE7, не прибегая к взлому встроенного блока?


css css-float internet-explorer-7
person Dan Auclair    schedule 12.12.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Есть ли способ сохранить это в той же строке, что и плавающий элемент в IE7, не прибегая к взлому встроенного блока?

Использование display: inline-block и хака для его работы в IE7 - простой способ исправить это - я не уверен, почему вы хотели бы этого избежать.

http://jsbin.com/orozen

<!DOCTYPE html>
<html>
  <head>
    <title>IE7 Float Test</title>
    <style>
      .container {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .floater {
        width: 20px;
        height: 20px;
        background: red;
        display: inline-block;
        *display: inline;
        zoom: 1;
      }
      .text {
        padding-left: 4px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="floater"></div><span class="text">This is some long long long long long long text I want on the same line.</span>
    </div>
  </body>
</html>
person thirtydot    schedule 12.12.2011