jquery.ui.dialog 1.81在IE8中出现滚动条bug解决方法

var dialog = $("#divDialog").dialog({
        autoOpen:false
        ,width:350
        ,
                }
        }
        ,title:"提示:"
        ,modal:true
        ,resizable:false
});

  网上查了一些资料,其中jquery官方也有此问题反馈：jquery官网 典型的有两种解决方法，分别是:

    1.注释掉js文件中控置"背景层"宽、高的代码,改由css文件.
    2.在open dialog时将overflow设为hidden, dialog close时将overflow设为auto。

这两种方案都能够解决问题，但并非从问题的症结处解决.如果能够找到造成该原因的代码，那样会更好(其实问题很明了).
分析: open dialog 出现滚动条是因为内容区("背景层")尺寸超出了父容器可视区.在jquery.ui.dialog.js 源文件中,如下代码在此处创建"背景层",背景层 宽,高均在此处设定的:

//742 行 jQuery UI Dialog 1.8.10
var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
.appendTo(document.body)
.css({
        width: this.width(),
        
//747 行

其中设置宽高的代码为this.width()与this.height(),对应方法如下:

//777 行

                // handle IE 6
                if ($.browser.msie && $.browser.version < 7) {
                        scrollHeight = Math.max(
                                document.documentElement.scrollHeight,
                                document.body.scrollHeight
                        );
                        offsetHeight = Math.max(
                                document.documentElement.offsetHeight,
                                document.body.offsetHeight
                        );

                        if (scrollHeight < offsetHeight) {
                                return $(window).height() + 'px';
                        } else {
                                return scrollHeight + 'px';
                        }
                // handle "good" browsers
                } else {
                        return $(document).height() + 'px';
                }
        },

        width: function() {
                var scrollWidth,
                        offsetWidth;
                // handle IE 6
                if ($.browser.msie && $.browser.version < 7 ) {
                        scrollWidth = Math.max(
                                document.documentElement.scrollWidth,
                                document.body.scrollWidth
                        );
                        offsetWidth = Math.max(
                                document.documentElement.offsetWidth,
                                document.body.offsetWidth
                        );

                        if (scrollWidth < offsetWidth) {
                                return $(window).width() + 'px';
                        } else {
                                return scrollWidth + 'px';
                        }
                // handle "good" browsers
                } else {
                        return $(document).width() + 'px';
                }
        },
//825 行

可以看出，在获得浏览器窗口尺寸时,作者只对IE6做兼容处理.而实际上IE7,IE8也应该在兼容处理的范围内. 因此移除掉 "$.browser.version < 7" 便能获得浏览器真实尺寸了.如下是更改后代码:

//777 行

                // handle IE 6
                if ($.browser.msie ) {
                        scrollHeight = Math.max(
                                document.documentElement.scrollHeight,
                                document.body.scrollHeight
                        );
                        offsetHeight = Math.max(
                                document.documentElement.offsetHeight,
                                document.body.offsetHeight
                        );

                        if (scrollHeight < offsetHeight) {
                                return $(window).height() + 'px';
                        } else {
                                return scrollHeight + 'px';
                        }
                // handle "good" browsers
                } else {
                        return $(document).height() + 'px';
                }
        },

        width: function() {
                var scrollWidth,
                        offsetWidth;
                // handle IE 6
                if ($.browser.msie ) {
                        scrollWidth = Math.max(
                                document.documentElement.scrollWidth,
                                document.body.scrollWidth
                        );
                        offsetWidth = Math.max(
                                document.documentElement.offsetWidth,
                                document.body.offsetWidth
                        );

                        if (scrollWidth < offsetWidth) {
                                return $(window).width() + 'px';
                        } else {
                                return scrollWidth + 'px';
                        }
                // handle "good" browsers
                } else {
                        return $(document).width() + 'px';
                }
        },
//825 行

经测试 ie6,ie7,ie8 open dialog(设置 modal:true ),open dialog 后均没有滚动条.