html - jquery-ui 在 IE9 中的页面加载时干扰 css

Question

我正在尝试将这种粘性页脚模式应用于我的模板:

http://ryanfait.com/sticky-footer/

但是在 Internet Explorer 9 中，我看到了一个滚动条，如果我向下滚动，页脚下方会出现很多空白区域:

它变得更奇怪了，因为我从我的模板中剥离了越来越多，直到我只剩下基本布局、bootstrap、页脚 css、jquery 和 jquery-ui。

jquery 和 jquery-ui 库仅包含在头部，没有其他 java 脚本加载可以调用它们。

问题仍然存在，直到我从头部移除 jquery-ui。然后页面呈现正常。

这里有一些活生生的例子:

With jquery-ui

Without jquery-ui

此外，如果我调整窗口大小，空白区域就会消失。捕获救命稻草我什至尝试在页面加载时触发 $(window).resize()，但没有这样的运气。

有谁知道为什么 Internet Explorer 9 会添加这个神秘的空白以及如何让它停止？我认为 IE9 应该是 IE 物种中最合规的...

感谢您的帮助，我整天都在为这个问题绞尽脑汁。

Answer 1

通过调试 jquery-ui，发现了一些晦涩难懂的代码，这些代码在 document ready 上运行，将 div 附加到页面末尾以修复 3 年前的 IE6 问题!

jQuery UI 1.8.17 第 225 行:

var body = document.body,
        div = body.appendChild( div = document.createElement( "div" ) );

$.extend( div.style, {
        minHeight: "100px",
        height: "auto",
        padding: 0,
        borderWidth: 0
});

$.support.minHeight = div.offsetHeight === 100;
$.support.selectstart = "onselectstart" in div;

// set display to none to avoid a layout bug in IE
// http://dev.jquery.com/ticket/4014
body.removeChild( div ).style.display = "none";

删除它解决了我的问题，我认为 IE9 兼容性比 IE6 更重要。