Question

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

我尝试在iFrame中的HTML和BODY标签中添加CSS（例如宽度：98％或宽度：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 ：

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

解决方案B

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

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

Answer 2

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

Answer 3

如果仅在显示模式ui时发生，请检查控制叠加层div的css。
同时检查您的文档类型。
您是否尝试过使用overflow:hidden？

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

Answer 4

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

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

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

4 个答案:

解决方案A

解决方案B