2

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

请参阅以下两个文件：page.html 和 iframe.html。

页面.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" 来解决这个问题？

编辑： 我不认为添加溢出：隐藏是解决方案，内容不应该“溢出” - 它比父级小。此外，我希望内容溢出并显示滚动条，以防内容很长。

谢谢你的帮助 ：）

在此处输入图像描述

4

2 回答 2

0

改变：

<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;">

替代添加 !important 在 css 规则的末尾

<style type="text/css">
    #myframe {
        height: 550px;
        overflow: hidden !important;
        width: 665px;
    }
</style>
于 2014-07-14T15:33:20.297 回答
0

将 iframe 的样式设置为溢出：隐藏...

<iframe id="myframe" style="display: inline; overflow: hidden; border: 0; margin: 0" scrolling="auto" src="iframe.html" >
</iframe>
于 2014-07-14T15:35:20.133 回答