Question

我在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中的浮动元素保持同一行，而不采用内联块黑客攻击？

Answer 1

有没有办法让它与浮动元素保持在同一行在IE7中没有求助于内联块黑客？

使用display: inline-block和hack使它在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>

IE7浮动块，页面上有省略号溢出

1 个答案: