Question

我有一个问题，firefox添加不必要的滚动条（它在chrome和ie工作正常）。

请参阅以下两个文件：page.html＆amp; Iframe.html的。

page.html中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #myframe {
            height: 550px;
            overflow: auto;
            width: 665px;
        }
    </style>
</head>
<body style="background-color:#dcdcdc;">
        <iframe id="myframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" src="iframe.html" style="display: inline;">
        </iframe>
</body>
</html>

Iframe.html的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        html {
            direction: rtl;
        }
    </style>
</head>
<body>
    <div style="width: 665px; height: 537px; background-color: blue;">
        x
    </div>
</body>
</html>

在firefox v30中，我总是会显示垂直和水平滚动条。 iframe.html中内容的大小与iframe标记大小相同。

我将问题缩小到使用iframe.html文件中的direction：rtl标记。当我添加方向：rtl我得到滚动条并删除它修复了问题。

知道为什么吗？

如何解决这个问题而不在iframe上使用scrolling =“no”？

修改我不认为添加溢出：隐藏是解决方案，内容不应该“溢出” - 它小于父。此外，我还想让内容溢出并显示滚动条，以防内容很长。

感谢您的帮助：）

enter image description here

Answer 1

变化：

<iframe id="myframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" src="iframe.html" style="display: inline;">

用这个：

<iframe id="myframe" frameborder="0" marginwidth="0" marginheight="0"  src="iframe.html" style="display: inline;">

替代添加！在css规则结尾处很重要

<style type="text/css">
    #myframe {
        height: 550px;
        overflow: hidden !important;
        width: 665px;
    }
</style>

Answer 2

将iframe的样式设置为overflow：hidden ...

<iframe id="myframe" style="display: inline; overflow: hidden; border: 0; margin: 0" scrolling="auto" src="iframe.html" >
</iframe>

Firefox IFrame Scrollbars

2 个答案: