溢出：隐藏问题 Internet Explorer 7答案

【问题标题】：overflow:hidden issue internet explorer 7溢出：隐藏问题 Internet Explorer 7
【发布时间】：2013-01-21 16:08:41
【问题描述】：

HTML

<div class="block">
    <div class="element1">text text text text </div>
    <div class="element2">text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>

CSS

.block{
    background:#F00;
    float: left;
    height: 90px;
    padding: 0 24px 0 0;
    position: relative;
    width: 256px;
}   
.block .element1{
    color: #000;
    display: block; 
    float: left;
    font-size: 32px;
    height: 35px;
    overflow: hidden;
    padding: 25px 0 0;
    text-align: right;
    width: 100%;
}
.block .element2 {
    color: #000;
    display: block;
    float: right;
    font-size: 12px;
    height: 14px;
    line-height: 1.1;
    margin: 15px 0 0;
    max-width: 205px;
    overflow: hidden;
    padding: 0 0 0 15px;
    text-align: right;
    width: auto;
}

overflow:hidden attr in element2 class=> IE8、9、FF、Chrome、Safari、Opera 没有任何问题，但如果我打开带有 IE7 文本的页面，则不会显示。将 position:relative attr 添加到块类（包装类）但没有任何变化（IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo）我该如何解决这个问题？ http://jsfiddle.net/L5Y57/

【问题讨论】：

你需要将position: relative;属性添加到使用溢出的类中，+你有第二个问题，文本没有显示，因为.block .element2有width: auto;属性，当我把它改成100%而不是自动（或任何固定宽度）在我看来问题已解决，请在我回答之前检查一下。看：jsfiddle.net/L5Y57/2
是的，工作得很好，谢谢@Al-Mothafar

标签： html css internet-explorer internet-explorer-7 overflow

【解决方案1】：

正如我在评论中所说。

您必须将position: relative; 属性添加到使用overflow: hidden 的类。

你还有另一个问题，它是因为 width: auto; 在类 .block .element2，它也是 IE7 的已知错误，要解决它，将其更改为 width: 100%; 或任何固定宽度。

您可以在您的代码中查看我的修复：http://jsfiddle.net/L5Y57/2/

【讨论】：