Question

我在页面上有一个可滚动的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

我们已经解开了这个谜团。

如果您想直接查看问题，可以在此处查看live。 注意：在我们推送修复程序后，此链接将不会重新生成。

在页面级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位置属性不能很好地协同工作。

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

2 个答案: