我正在尝试启动一个 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。 非常感谢您的帮助。
最佳答案
一旦您将 iframe 设置为 height: 95%，滚动条就会消失。至于为什么对话框会这样，我将不得不进一步调查，但它目前确实有效
好像是对话框引起的，不是iframe本身
关于html - jQuery UI 对话框在 FF5 中有不需要的垂直滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6899280/