html – 在Chrome中使用绝对定位div而不是Safari或Firefox的保证金底部

概述我有一个网站,当您滚动到内容的底部时,主要内容下面会显示“隐藏的页脚”.主要内容需要绝对定位(因为它是较大“事物”的一部分),并且页脚需要负z-索引和固定位置才能产生正确的效果. 问题是我在谷歌浏览器中完美地运行了一切,但是在显示页脚的主要内容上的边距底部在Safari或Firefox中不起作用.是什么赋予了？ 我已经尝试过在其他问题中给出的答案(包括spacer div或各种包装div).其中一 我有一个网站,当您滚动到内容的底部时,主要内容下面会显示“隐藏的页脚”.主要内容需要绝对定位(因为它是较大“事物”的一部分),并且页脚需要负z-索引和固定位置才能产生正确的效果.

问题是我在谷歌浏览器中完美地运行了一切,但是在显示页脚的主要内容上的边距底部在Safari或firefox中不起作用.是什么赋予了？

我已经尝试过在其他问题中给出的答案(包括spacer div或各种包装div).其中一些解决方案修复了查看页脚的功能,但是现在所有这些解决方案都删除了点击低z-index页脚中链接的功能,因为它们现在被顶部的透明div“覆盖”.

这是一个Jsfiddle,它显示了功能(如果你在Chrome中打开)和问题(如果你在Safari或firefox中打开)：https://jsfiddle.net/3npkmy6f/3/

任何帮助,将不胜感激.

HTML：

@H_404_21@<div ></div><div > <a href="http://Google.com">THIS IS A link</a></div>

CSS：

@H_404_21@.main { height: 200%; position: absolute; wIDth: 100%; background-image: url("http://lorempixel.com/600/300/sports/1/"); margin-bottom: 400px; } a { color: red; margin-top: 200px; left: 50%; display: block; text-align: center; Font-size: 50px; margin-left: -25px; } .hIDden-footer { wIDth: 100%; background-image: url("http://lorempixel.com/400/200/"); height: 400px; position: fixed; bottom: 0px; z-index: -2; display: block; }解决方法 这是一个带有包装和垫片的解决方案.
https://jsfiddle.net/Boloeng/3npkmy6f/11/

@H_404_21@<div > <div > </div></div><div ></div><div > <a href="http://Google.com">THIS IS A link</a></div>

但是,绝对元素的底部边距可能是未指定的(这可以解释不同的行为).所以我会避免这种方法.

总结

以上是内存溢出为你收集整理的html – 在Chrome中使用绝对定位div而不是Safari或Firefox的保证金底部全部内容，希望文章能够帮你解决html – 在Chrome中使用绝对定位div而不是Safari或Firefox的保证金底部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。