我在使用Firefox添加不必要的滚动条时遇到问题(在Chrome和IE中可以正常工作)。

请参阅以下两个文件:page.html和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标记。
当我添加direction:rtl时,我得到了滚动条并将其删除可解决此问题。

知道为什么吗?

如何在不使用iframe的情况下解决此问题而不使用scrolling =“ no”?

编辑:
我不认为添加overflow:hidden是解决方案,内容不应该“ overflow”-它的大小小于父对象。
我也想让内容溢出并在内容很长的情况下显示滚动条。

谢谢你的帮助 :)

最佳答案

更改:

<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规则的末尾添加add!important

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

10-05 20:41
查看更多