当前位置：文江博客话题详情

此页脚在 Chrome 中保持不变，如何使其在 Firefox 中保持不变

发布于 2024-11-03 06:22:06 字数 293 浏览 3 评论 0原文

此页脚在 Chrome 中保持不变，如何重写 HTML 或 CSS 以使其在 Firefox 中保持不变？

http://goo.gl/rAbH6

就像，当我在 Chrome 中访问页面然后缩小时，页脚停留在屏幕底部，但是当我在 Firefox 中访问同一页面并尝试缩小时，页脚不会停留在正确的位置。

如果您尝试访问该页面，您就会明白我的意思。

有人知道吗？

亲切的问候

庞吉

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏见 2024-11-10 06:22:06

你的问题就出在你的代码上。

#footer {
    height:40px;
    position:absolute;
    overflow:hidden;
    background:url(images/bottombar.png) repeat-x 0 0;
    position:relative;
    margin-top:400px;
}

正如你所看到的，你已经告诉它是绝对的和相对的，所以你无缘无故地重复代码，并且 margin-top 为 400px；所以无论你放大或缩小多少，你都已经告诉它明确地保持在那个位置。而你应该有以下代码：

#footer {
    height:40px;
    position:absolute;
    overflow:hidden;
    background:url(images/bottombar.png) repeat-x 0 0;
    top:100%;
    margin-top:-40px;
}

所以现在我们告诉它从页面顶部，向下到底部，高度为 40px，所以我们现在将它显示在文档本身之外，所以然后我们将其 margin-top 放回原位，即我们指定的 40px 高度。#

You're problem is right here with your code.

#footer {
    height:40px;
    position:absolute;
    overflow:hidden;
    background:url(images/bottombar.png) repeat-x 0 0;
    position:relative;
    margin-top:400px;
}

As you can see, you've told it to be absolute and relative, so you're duplicating code for no reason and margin-top with 400px; so no matter how much you zoom in or out, you've told it to remain explicitly in that position. Whereas you should have the following code:

#footer {
    height:40px;
    position:absolute;
    overflow:hidden;
    background:url(images/bottombar.png) repeat-x 0 0;
    top:100%;
    margin-top:-40px;
}

So now we're telling it to go from the top, down to the bottom of the page, with a height of 40px, so we're now displaying it outside of the document itself, so then we margin-top it back in to place, which is the 40px of height we assigned.#

回复收藏 0 原文

~没有更多了~