使用省略号溢出的IE7浮动块按下页面

我在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 +和所有其他浏览器中的长文本才能正确ellipsized到浮动元素的右边。在IE7中，文本跨度被推到浮动元素的下方，并在那里被椭圆化。有没有什么办法可以保持与IE7中的浮动元素在同一行上，而不需要使用内联块黑客？

来源

2011-12-12 Dan Auclair

有什么办法可以在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>

来源

2011-12-12 10:32:01 thirtydot

使用省略号溢出的IE7浮动块按下页面

回答

相关问题