jQuery UI对话框中的iFrame导致父级的水平滚动条

我正在使用jQuery UI对话框在新的iFrame中显示内容。 一切都很好，除了对话框的父窗口在显示对话框时获得水平滚动条（IE8）。 我已经将问题追溯到iFrame中的元素被浏览器解释为非常宽，即使是580px div中iFrame页面上的唯一内容。

我已经尝试将CS​​S添加到iFrame中的HTML和BODY标签（例如宽度：98％或宽度：600px;）……其中没有一个似乎有任何影响。

打开对话框的代码如下。 有什么建议？

$("a[providerId]").click(function(e) { e.preventDefault(); var $this = $(this); var $width = 600; var $height = 400; $('').dialog({ title: $this.attr('title'), autoOpen: true, width: $width, height: $height, modal: true, resizable: false, autoResize: true, overlay: { opacity: 0.5, background: "black" } }).width($width).height($height); }); 

更新 ：看看这些演示，我得到了代码，看看我在说什么（在IE8中）： http ： //elijahmanor.com/demos/jqueryuidialogiframe/index.html

Answer 1

这似乎是jQuery UI 1.7.2中的一个小错误，目前有一个关于该问题的开放票证（＃3623） 。 票证评论中提出了两种解决方案：

解决方案A.

修改jquery-ui-1.7.2.custom.css ：

1. 找到.ui-widget-overlay 。
2. 添加以下规则： position:fixed; 。

解决方案B.

修改jquery-ui-1.7.2.custom.min.js ：

1. 查找addClass("ui-widget-overlay").css({width:this.width(),height:this.height()}); 在第97行。
2. 删除.css({width:this.width(),height:this.height()}) 。

Answer 2

我的第一个想法是overflow-x : hidden ，在我的情况下，在标准模式下的IE8以及怪癖模式下，它可以实现技巧，水平条消失。 所有你需要的是把它放在身体标签上。

Answer 3

• 如果仅在显示模态ui时发生，请检查控制叠加的div的css。
• 检查您的doctype。
• 你尝试过overflow:hidden吗？

将url发布到问题的在线演示将有所帮助。

Answer 4

我有同样的问题。 在我的情况下，对话框是正文的子对象，我使用以下脚本来防止溢出：

 $("#your-dialog").dialog({ //our options, open: function(){ $("body").css("overflow", "hidden"); }, close: function(){ $("body").css("overflow", "initial"); } });