jquery - jQuery UI 对话框中的 iFrame 导致父级上出现水平滚动条

Question

我正在使用 jQuery UI 对话框在新的 iFrame 中呈现内容。一切都很顺利，除了对话框的父窗口在显示对话框时会出现水平滚动条(IE8)。我已经追踪到问题是 iFrame 中的 元素被浏览器解释为非常宽，即使 iFrame 中页面上的唯一内容位于 580px div 中。

我尝试将 CSS 添加到 iFrame 内的 HTML 和 BODY 标记(例如 width: 98% 或 width: 600px；)...但似乎都没有任何影响。

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

$("a[providerId]").click(function(e) {
                e.preventDefault();
                var $this = $(this);
                var $width = 600;
                var $height = 400;
                $('<iframe id="companyDetail" class="companyDetail" style="padding: 0px;" src="' + this.href + '" />').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 中的一个小错误，目前有 an open ticket (#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. 在第 97 行找到 addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});。
2. 删除.css({width:this.width(),height:this.height()})。