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

【问题标题】：jquery-ui interfering with css on page load in IE9jquery-ui 在 IE9 中的页面加载时干扰 css
【发布时间】：2012-01-17 17:12:23
【问题描述】：

我正在尝试将此粘性页脚模式应用于我的模板：

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

但在 Internet Explorer 9 中，我看到一个滚动条，如果我向下滚动页脚下方会出现大量空白：

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

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

问题仍然存在，直到我从头部删除 jquery-ui。然后页面渲染正常。

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

With jquery-ui

Without jquery-ui

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

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

感谢您的帮助，我整天都在为这个问题而烦恼。

【问题讨论】：

标签： html css jquery-ui internet-explorer-9 sticky-footer

【解决方案1】：

在调试 jquery-ui 时，发现了一些在准备好的文档上运行的晦涩代码，将 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 更重要。

【讨论】：

【解决方案2】：

您是否使用与 jQuery UI 共享的任何 css 类名称？它们都以ui- 开头，例如ui-icon、ui-widget-content 等。更多信息请查看CSS Framework docs。

【讨论】：

不，查看实时示例的源代码，不使用任何带有 ui 前缀的类。