由javascript引起的页脚下方的空白...如何解决？答案

【问题标题】：White space below footer caused by javascript... how to fix?由javascript引起的页脚下方的空白...如何解决？
【发布时间】：2014-05-28 14:42:39
【问题描述】：

我在页脚下方有一个烦人的空白问题，无论我搜索了多长时间我都找不到答案，因为我在 CSS 中似乎无法解决这个问题。此外，问题并不在每个页面上......它在网站内任意选择（看似）随机页面，这让我认为这可能是由于一些我似乎无法定位为有问题的 javascript 代码而发生的派对。

无论如何，在浏览网站数小时后，我决定在没有 javascript 的情况下加载网站，果然空白消失了。作为一个有点新手的程序员，我不太确定下一步该做什么。我把

<div class="clear"></div>

就在我的标题之前，瞧，它起作用了……任何页面上都没有空白。所以从技术上讲，我想这至少在视觉上解决了我的问题，但由于我是新手，我不知道这会产生什么潜在影响？离开它好吗？我可以试试别的吗？这个问题对任何人来说都很熟悉吗？非常感谢您的帮助！我不知道您是否需要更多信息。

为了清楚起见，我正在 Wordpress 中根据其他人的主题开发一个子主题。该网站是一个多站点，尽管具有几乎所有相同的元素，但多站点上的另一个站点似乎根本没有损坏。少数不同之处之一是 Contact Form 7 表格，其中每个表格都有自己的 CF7 表格实例。当我尝试向 CF7 表单添加一些 javascript 时，我相信那是它崩溃的时候。由于我只将它添加到一个网站（在表单本身内），我认为这就是为什么只有一个网站破坏了下面的空白。仅仅删除代码是不够的。

顺便说一句，我应该补充一下，我以前在这个网站上遇到过这个问题，当时我的（奇怪的）解决方案是重命名出现白色间隙的页面的链接......果然，有效。显然，随着我的网站增加反向链接，我不想继续这样做。

那么，我的基本修复足够了吗？

【问题讨论】：

不可能在没有看到任何实际代码的情况下说出来。举例说明您认为导致问题的原因，特别是您尝试纠正的原因。
我们需要更多信息才能确定。你给我们的那一点代码并没有告诉我们任何事情。 “clear”类可以应用任何东西，但很可能它是用于浮动布局的“clearfix” div，通常用于解决高度为 0 的浮动元素的问题。
谢谢大家 - 我想我的意思是，在我的声明之前放一些东西有什么危险？毕竟，这不应该是我的 html 文档中的第一件事吗？如果不是，这会损害 SEO 或 Google 页面排名等因素吗？
" 声明必须是 HTML 文档中的第一件事，在标记之前。": w3schools.com/tags/tag_DOCTYPE.asp
The doctype explains what type of HTML is to be expected and therefore what spec validators (for example the W3C HTML validator) should validate your document against.

标签： javascript jquery wordpress

【解决方案1】：

正如 APAD1 所说，<!DOCTYPE> 声明必须始终是 HTML 文档中的第一个元素，否则将无效！将 <div class="clear"></div> 放在 <!DOCTYPE> 声明之前似乎可以解决您的问题这一事实表明，空白在某种程度上与该特定 HTML 呈现模式的浏览器默认值有关或由该特定 HTML 呈现模式引起。

另外，你用的是什么浏览器？您没有使用 Internet Explorer，是吗？不同的浏览器甚至同一浏览器的不同版本可能会以不同的方式呈现您的页面。

<!DOCTYPE>声明，需要指明浏览器应该进入的特定布局模式。

例如，在 Internet Explorer 中，省略 <!DOCTYPE> 声明可能会导致浏览器进入 Quirks 模式，而不是 Standards-Compliance 模式。请注意，<!DOCTYPE html> 用于 HTML5 文档，而类似：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`

...用于 HTML4。 (X)HTML doctype 声明用于将浏览器置于特定的布局/呈现模式。不同的渲染模式会导致不同的 CSS 默认样式。很可能是 CSS 规则的某些组合导致了意外的空白。

我建议您熟悉（或至少使用）Firebug（FireFox 扩展）、Google Chrome 和 Safari 中的Webkit Inspector（“开发者工具”）和/或@987654323 @。所有这些工具都允许您为您的网页“检查”Document Object Model (DOM) 中的元素。这些工具甚至可以让您查看和修改 DOM 中元素的 HTML 源代码和 CSS 规则。（请注意，您使用这些工具所做的任何更改都不会保存，因此不是持久性！）这意味着使用这些工具之一，您可以选择您的页脚元素并查看其应用（"计算") CSS 样式。这不仅对您的网页或 WordPress 主题进行故障排除特别有用，而且对开发它也很有帮助。

所以，总结一下：

如果您不将<!DOCTYPE> 声明作为第一个元素，那么您不妨完全省略它。
<!DOCTYPE> 声明将浏览器置于具有某些 CSS 默认值的特定布局模式。
CSS 规则的组合可能会导致意外的空白。
您可以使用浏览器“开发者工具”（例如 FireBug）来检查（和修改）您的网页。

【讨论】：

这是一个很好的答案，谢谢亚历克斯。尽管我一直在使用 Firebug 处理每个 CSS 组合，但我发现这可能会影响元素。我所知道的是：（1）它在正文或html标签内受到影响，或者可能两者都受到影响。 (2) 它绝对与 javascript 相关 (3) 它出现在我尝试过的所有浏览器和屏幕尺寸上（Firefox、Chrome、Safari、Opera、手机、ipad ......一切......） (4) 而溢出显示在页脚中，如果我在 doctype 声明之前放一个句号，空白将移到顶部并忽略底部。

【解决方案2】：

好的，这已解决（截至目前）。问题是正在将 javascript 写入页脚的插件冲突。仅当我将 javascript 添加到 Contact Form 7 插件时才引起问题。

为了解决这个问题，我按照你的建议在 firebug 中编辑了 HTML，Alex。一旦我发现了有问题的插件，我就禁用了冲突的脚本。

谢谢你们的帮助，伙计们。已解决。

【讨论】：