溢出:汽车;在IE7中无法正常工作

时间:2013-11-05 10:38:19

标签: html css

我有一个容器来显示用户活动。我将overflow auto设置为此容器。它在chrome,FF等工作得很好,但在IE7中,内容溢出来自这个容器。它不会隐藏。请查看以下内容

enter image description here

in jsfiddle : http://jsfiddle.net/nUQ8V/1/

or code :

**CSS:**
----------------------------------
p {
    margin:0;  font-family:arial; font-size:12px;
}
.container {
    height:200px;
    width:150px;
    overflow:auto;
    padding:10px;
    border:2px solid #ddd;
}

.inner {
    padding:10px 0;
    border-bottom:1px dotted #ccc;
    position:relative;
}

.title { 
    font-weight:bold;
}

**html** 
------------------------------
<div class="container">
    <div class='inner'>
        <p class="title">Gopi Buyer Viewed</p>
        <p>Sri Ragavendra Castle</p>
        <p>Korattur</p>
    </div>
    <div class='inner'>
        <p class="title">Gopi Buyer Viewed</p>
        <p>Sri Ragavendra Castle</p>
        <p>Korattur</p>
    </div>
    <div class='inner'>
        <p class="title">Gopi Buyer Viewed</p>
        <p>Sri Ragavendra Castle</p>
        <p>Korattur</p>
    </div>
    <div class='inner'>
        <p class="title">Gopi Buyer Viewed</p>
        <p>Sri Ragavendra Castle</p>
        <p>Korattur</p>
    </div>
</div>

2 个答案:

答案 0 :(得分:1)

删除位置:relative;到下面的课程

.inner {
    padding:10px 0;
    border-bottom:1px dotted #ccc;
   /* position:relative; */
}

它适用于所有浏览器。

答案 1 :(得分:1)

小提琴:http://jsfiddle.net/nUQ8V/5/

使用ie7内联黑客:

.inner {
    padding:10px 0;
    border-bottom:1px dotted #ccc;
    position:relative;
    *position:*static;
}