Question

我正在尝试启动一个jQuery UI对话框，其中包含一个非常简单的html页面的iframe。该页面不应该需要滚动条。在IE9中我没有滚动条，但在FF5中我得到一个垂直滚动条。这是启动对话框的页面：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
    <style type="text/css">
        iframe {width:100%; height:100%; border:0;}
    </style>
</head>
<body>
    <a href="" onclick="return showDialog()">Show the Dialog</a>
    <div id="dlg"></div>

    <script type="text/javascript">
        $("#dlg").dialog({ autoOpen: false, modal: true, width:400, height:300, resizable:false, title: "YO"});

        function showDialog()
        {
            $("#dlg").html('<iframe src="frame.htm" />').dialog("open");
            return false;
        }
    </script>
</body>
</html>

这是IFrame显示的简单frame.htm页面：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *    {margin:0; padding:0;}
        body { background:#EFF;}
    </style>
</head>
<body>
<div>
    <p>I'm a paragraph</p>
    <div style="height:2px; background:#000;"></div>
</div>
</body>
</html>

？

到目前为止，我能做的最好的事情是通过改变jQuery UI CSS来完全禁用滚动：

.ui-dialog .ui-dialog-content { overflow: hidden; }

但我希望能够使用overflow：auto，如果内容实际上保证滚动条。非常感谢您的帮助。

Answer 1

将iframe设置为height: 95%后，滚动条会消失。至于为什么对话框的行为如此，我将不得不进一步调查，但它确实有效

它似乎是由对话框引起的，而不是iframe本身

jQuery UI对话框在FF5中有不需要的垂直滚动条

1 个答案: