兼容模式DIV中的IE7 / IE8出现溢出问题

Question

我在页面上有一个可滚动的div，该div最终呈现超出div底部的位置，有时在其后面留下不滚动的棍子字符。 在兼容模式下的IE7和IE8中会发生这种情况。

以下是DOM中的HTML代码：

<DIV id=ctl00_MainContent_ViewPort class=AgreementViewPort><IMG class=PortSeal src="/images/Seal.png">
<DIV class=DocumentTitle>Document Title</DIV>
<OL>
<LI>Condition #1</LI>
<LI>Condition #2<SUP>1</SUP></LI>
<LI>Condition #3</LI>
<DL>
<DT><SUP>1</SUP> some foot-noted definition.</DT></DL></DIV>

这是应用的CSS样式：

color: #000;
font-family: arial, tahoma, sans-serif
font-size: 12pt;
height: 300px;
margin: 5px;
overflow: scroll;
padding : 5px;
width: 600px;

在IE8，Firefox和Chrome下，此效果很好。

有什么建议么？

Answer 1

只是看一下，我建议将图像放入自己的DIV中。 这样，您可以控制任何溢出。

还将以下内容添加到您的CSS中：

clip:rect(0px,600px,300px,0px);

Answer 2

我们解决了这个谜。

如果您想直接查看问题，可以在此处实时查看。 注意：推送修复后，此链接将不会复制。

在页面级CSS的LI元素上，我删除了以下样式属性

li
{
        margin-bottom: 10px;
        position: relative;
        left: 10px;
        width: 500px;
}

并将它们替换为：

li
{
    margin: 0px 0px 10px 25px;
}

在页面级CSS的OL元素上，width属性已移动。

ol 
    {
        padding-left: 10px;
        width: 500px;
    }

而且我觉得自己是个白痴。 这个故事的寓意在于，IE7的可滚动div和CSS position属性不能很好地结合在一起使用，这在其他地方已经讨论过了。