Wordpress：页脚下方的额外空间答案

【问题标题】：Wordpress: Extra space below the footerWordpress：页脚下方的额外空间
【发布时间】：2013-05-09 10:38:17
【问题描述】：

我已经阅读了很多关于此的答案，但它并没有解决我的问题。在我滚动到底部的主页上，页脚有一个额外的空间，但它下面的额外空间似乎是我页面的背景。在其他页面中，页脚还可以。我认为这是因为我的主页内容很短。实际上，我通过添加边距底部来欺骗它的侧边栏。适用于所有浏览器的任何帮助以及可以解决此问题的任何屏幕尺寸？谢谢！

这是我页脚的 CSS：

#footerArea{
    height:108px;
    width:100%;
    z-index:5;
    background:url('../images/footerArea.jpg') #404042;


}
#footerPart{
    height:48px;
    width:988px;
    margin:0 auto;
    padding:0px;
    background:url('../images/footerbg.jpg') no-repeat #404042; 
}
#footerPart a {
    text-decoration:none;
}

#footerLink{
    margin:0 auto;
    padding:15px 0px 0px 0px;
    width:960px;

    }
#footerLink ul{
list-style-type:none;
float:left;
}
#footerLink ul li{
    display:inline;
    margin:0px 5px 0px 0px;
}
#footerLink ul li a{
    background:url('../images/footerbtn.jpg') no-repeat;
    font-size:10px;
    text-decoration:none;
    padding:0px 0px 0px 15px;
}

编辑：这是来自footer.php

<div id="footerArea">
        <div id="footerPart">
        <div id="footerLink">
            <ul>
        <li><a href="<?php bloginfo('url'); ?>?page_id=10">xxx</a></li>
        <li> | </li>
        <li><li><a href="<?php echo get_option('home'); ?>/?page_id=17">yyyy</a></li>
        <li> | </li>
        <li><a href="https://zzz.com" target="_blank">zzzzz</a></li>
        <li> | </li>
        <li><a href="http://aaa.com" target="_blank">aaaaaa</a></li>

       </ul>
       <p class="fR">SOME TEXT　<a href="http://www.somesite.php" target="_blank">ggggg</a></p>
     </div>
   </div>
 </div>


</body>
</html>

我已经在 Chrome、Firefox 和 IE 中测试过，但输出相同。

【问题讨论】：

我们需要的不仅仅是css...尝试包含一些HTML结构...您使用的是哪个浏览器？你试过其他浏览器吗？
请重新检查，编辑。
请尽量理解您的问题缺少信息。 #footArea 选择器所针对的元素的上下文是哪个？那里有任何包装元素吗？顺便说一句，您是否知道 z-index 值仅在定位元素中才有意义？请。善待。包括您的问题中涉及的 html 和 css，肯定这里有很多人会很乐意为您提供帮助。
你可以为它创建一个 jsFiddle 吗？
好的，很抱歉。我会再次编辑它:) 顺便说一句，这是 Wordpress。

标签： html css wordpress footer

【解决方案1】：

在您的 HTML 中，您在另一个 <li> 中嵌入了一个 <li> 标记，这会使您的代码无效，因为它没有结束标记。

除此之外，很难调试诸如“有额外空间”之类的模糊问题。为了提供进一步的见解，如果您可以提供 jsfiddle 或类似的东西，那就太好了。

如果您不能提供或不知道如何提供，我可以提供一些调试技巧。如果您使用 google chrome 进行调试，您可以进入您的 webkit 检查器，如果使用的是 firefox（右键单击，“检查元素”），则可以进入 firebug 并查看特定元素的 CSS 和装箱。

如果失败并且您仍然无法找出导致额外空间的原因，您可以右键单击元素并开始删除您认为可能是问题根源的元素。一旦一个元素被删除，它将不再出现在您的浏览器中，所以如果您删除一个并且问题仍然存在，您可以放心地知道它不是那个元素（或者是多个元素，但不要变得那么复杂。）

【讨论】：

【解决方案2】：

检查您的文档末尾是否有某种网络跟踪代码或任何其他 javascript（在 javascript 标记中）。虽然它必须是几行 javascript 代码，但它有时会在某些浏览器中占用页脚下方的空间，尤其是在 IE 中。如果您可以提供codepen 参考，我们可以审核

【讨论】：