IE/Chrome 中的 jQuery/CSS 高度问题答案

【问题标题】：jQuery/CSS height issues in IE/ChromeIE/Chrome 中的 jQuery/CSS 高度问题
【发布时间】：2011-02-09 12:09:23
【问题描述】：

我的 jQuery 动画启动/网站出现了更多问题。

您可以在voidsync.com/test 看到在大多数浏览器中运行的启动画面。我在使用 IE 时遇到的问题是 html、body 或 #CONTAINER 无法适应较长的内容，例如服务或关于页面中的内容 - 您会看到页脚没有正确移动到底部。

加载或完成启动后刷新浏览器，页面高度会适当调整以适应内容。这也适用于禁用 JS 的 IE8，所以我知道问题就在那里。（除了在 IE7 或 IE8 兼容模式下，页脚不会下移，句号）。

如果需要，我可以在此处发布代码，但我不确定这是否必要或可能，因为您可能需要查看所有源代码才能获得正确的想法。

额外问题

托管页面在 Chrome 中也存在类似问题，其中内容高度在该页面上似乎没有正确调整大小，或者页脚重叠，这可能是由于 table 元素上使用的样式.

提前致谢！

【问题讨论】：

【解决方案1】：

尝试在页脚前添加<div class="clear"></div>

具有以下样式：

.clear {height:1px; clear:both;}

【讨论】：

【解决方案2】：

所以你正在做那些 100% 高度的事情，对吗？

根据我的经验，它只适用于以下情况

html,body {height:100%;}
#wrapper {position: relative;min-height: 100%;}

在您的 css 中，您依靠 #CONTAINER 来保持 100% 的高度，但现在在 IE 中，它始终是视口的 100% 高度，而不是内容的高度。

您可以在所有内容周围添加一个#wrapper，紧跟在body 之后，以帮助您保持100% 的高度，并相应地定位您的页脚，可能使用position:absolute; bottom: 0;

【讨论】：

刷新问题是在我的页面加载系统中，我认为这是由于变量没有被更改，并且绝对定位干扰了动画。同样在包装器上使用负边距底部会导致页脚在 Chrome（和 Safari）中“重叠”，因此我在 CSS 中针对 webkit 浏览器进行了调整。