Question

我有一个旧网站，我最近在这个网站上添加了一个页脚菜单。页脚菜单应位于网站的页脚，低于其他所有内容。但我发现，使用谷歌浏览器，页脚显得太高 - 超出我网站的某些部分。我试过，但没有办法解决它。我尝试在页脚之前添加“<center>”，但它无法解决问题。

我在不同的浏览器上对此进行了测试，发现了以下结果：

使用Google Chrome Canary就可以了
使用FireFox和Internet Explorer很好
与Opera和Safari一起很好
使用谷歌浏览器无效

我在两台计算机上检查了这一点（Windows，Google Chrome版本31.0.1650.63米）。 Canary版本是34.0.1768.0金丝雀，它看起来很好。

页脚包含表格和一些其他HTML元素，我试图禁用CSS，但它没有解决问题。你知道怎么让页脚出现在网站的页脚？该页面的链接为http://www.speedysoftware.com/composer/appendix-7/，同一问题出现在this website的几页上。

这是页脚的HTML：

<center>
<div class="footer" id="footer">

<div class="links_table" >
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="bottomlinks" dir="ltr">
<tbody><tr align="center" valign="top">
<td align="center" width="100%">

<table cellspacing="5" cellpadding="0" border="0" dir="ltr">

<tbody><tr align="center" valign="top"><td><table cellspacing="0" cellpadding="0" border="0" dir="ltr"><tbody><tr align="center" valign="bottom">
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedy.net/about/" title="About">About</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedy.net/privacy/" title="Privacy">Privacy</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedy.net/terms/" title="Terms of Service">Terms</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedy.net/contact/" title="Contact Us">Contact Us</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://sourceforge.net/project/project_donations.php?group_id=57192" title="Donate to Speedy Composer">Donate</a></td>
</tr></tbody></table></td></tr>

<tr align="center" valign="top"><td>&nbsp;</td></tr>

<tr align="center" valign="top"><td><table cellspacing="0" cellpadding="0" border="0" dir="ltr"><tbody><tr align="center" valign="bottom">
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedy.net/" title="Speedy Net">Speedy Net</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedycomposer.com/" title="Speedy Composer">Speedy Composer</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedywhois.com/" title="Speedy Whois">Speedy Whois</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedy.net/wordpress/" title="Speedy Net WordPress">Speedy Net WordPress</a></td>
</tr></tbody></table></td></tr>

<tr align="center" valign="top"><td>&nbsp;</td></tr>

<tr align="center" valign="top"><td><table cellspacing="0" cellpadding="0" border="0" dir="ltr"><tbody><tr align="center" valign="bottom">
<td nowrap="nowrap" dir="ltr"><a href="http://www.cafepress.com/speedynet" title="Speedy Net's Shop">Speedy Net's Shop</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.cafepress.com/speedycomposer" title="Speedy Composer's Shop">Speedy Composer's Shop</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.cafepress.com/speedy_s" title="Speedy S-logo Shop">Speedy S-logo Shop</a></td>
</tr></tbody></table></td></tr>

<tr align="center" valign="top"><td>&nbsp;</td></tr>

<tr align="center" valign="top"><td><table cellspacing="0" cellpadding="0" border="0" dir="ltr"><tbody><tr align="center" valign="bottom">
<td nowrap="nowrap" dir="ltr"><a href="http://www.php.net/" title="PHP">PHP</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.mysql.com/" title="MySQL">MySQL</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.java.com/" title="Java">Java</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.mathworks.com/products/matlab/" title="MATLAB">MATLAB</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.gnu.org/software/octave/" title="Octave">Octave</a></td>
</tr></tbody></table></td>
</tr>

</tbody>
</table>

</td>
</tr>
</tbody></table>
</div>

</div>
</center>

这就是CSS：

.footer, .push {
    /* .push must be the same height as .footer */
    /* height: 82px; */
    height: 102px;
}

.footer {
    text-align: center;
    /* border-top: 1px solid #B2CAFA; */
    clear: both;
    font-size: 13px;
    line-height: 1;
    position: relative;
}

.footer table {
    border-collapse: collapse;
    border-spacing: 0;
}

.footer a {
    text-decoration: none;
    font-weight: normal;
    font-size: 13px;
    color: #3D70A3 !important;
}

.footer a:visited {
    color: #3D70A3 !important;
}

.footer a:link {
    color: #3D70A3 !important;
}

.footer a:active {
    color: #3D70A3 !important;
}

.footer a:hover {
    text-decoration: underline;
}

.footer .links_table {
    padding-top: 10px;
}

我知道HTML并不完全有效，但这是一个旧网站，我没有时间对其进行验证。我只是希望页脚在所有浏览器中都处于正确的位置。你知道如何修复这个bug吗？

Answer 1

我认为这是Chrome在订购元素时的错误。

Chrome displaying dom elements in strange order, then fixed on refresh

当我在检查器中更改中心标签的样式（例如，将显示更改为不同的值）时，它会正确呈现。尝试放置

<center>
...
</center>

与

<div style="margin: auto;">
...
</div>

尽快让您的代码标准化！

如何使用Google Chrome将页脚粘贴到页面底部？

1 个答案: