1

请参阅以下页面：

http://www.judsondesigns.com/Demos/jscroller/index.html

如果您在 IE 中注意到，它会导致滚动。其他所有浏览器都可以。为什么IE会导致滚动？我怎样才能解决这个问题？

谢谢

贾德森

这是我正在使用的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
html, body{ 

    height:100%; 
    width: 100%;
    margin: 0px;
    padding: 0px;

 }

</style>
</head>

<body>
<div style="display:table; width: 100%; height:100%;">
<div style="display: table-row; background: red">test</div>
<div style="display: table-row">
        <div style="display: table-cell; height:100%; width:100%;overflow: hidden ">
            <div style=" height:100%; width:100%; overflow:hidden; background: #06F">test123
            </div>
        </div>
</div>
<div style="display:table-row; background: red;">test</div></div>
</div>
</body>
</html>

和一张图片正常的IE10模式： IE 中滚动问题的屏幕截图

在 Quirks 模式下（我需要它的外观） IE 中 Quirks 模式的屏幕截图

4

2 回答 2

1

margin-bottom您应该在div包含test123高于table-row底部高度的值的文本上设置负数。您可以将其设置-100%为安全的，这将在 IE 中修复它，并且不会在任何其他浏览器中破坏它。

这是一个jsFiddle

于 2013-05-22T03:42:44.300 回答
0 
<div style="width: 100%; height: 100%; display: table; max-height: 100%;">
<div style="background: red; height: 2%; display: table-row;">test</div>
<div style="display: table-row;">
        <div style="width: 100%; height: 96%; overflow: hidden; display: table-cell; max-height: 100%; background-color: blue;">
            <div style="width: 100%; height: inherit; color: green; display: table;">test123456
 asdfasdfasdf           </div>
        </div>
</div>
<div style="background: red; height: 2%; display: table-row;">test</div></div>

这对我有用

于 2013-05-22T00:53:17.237 回答