边距仅在 Safari 中不起作用（元素位于页面底部）答案

【问题标题】：Margin not working only in Safari (element is at the bottom of the page)边距仅在 Safari 中不起作用（元素位于页面底部）
【发布时间】：2015-08-06 12:18:07
【问题描述】：

请在最新的 safari 中查看以下链接： http://www.grupoguion.com/

页脚固定在底部，应该随着滚动显示，所以上一节有一个底部边距，但它不起作用，只在 Safari 中。其他地方都可以，即使在 I.E. 我试图在页面包装器中添加溢出：自动，但是在所有浏览器中，所有元素都消失并出现了，一切都变得奇怪了。我也读过在 body 和 html 中删除 height: 100% 可能会解决这个问题，但这不是我的选择，因为我需要图像来修复浏览器高度。

请问有人有其他可能的解决方案吗？

提前致谢。

【问题讨论】：

请提供您目前所做的工作。
嗨，我已经尝试在页面包装器中添加溢出：自动但没有工作
您链接到的网站显然已经修复，这使得这个问题很难理解。请在您的问题中包含实际代码，而不是链接。（像 JSFiddle 这样的网站似乎是可以接受的，但仍然没有真正受到鼓励。）

标签： html css safari

【解决方案1】：

您可以添加一个与底部大小相同的 div 并使其透明。 html:

<div id='tr-footer'>
</div>

css：

#tr-footer{
height: ?px;
width:100%;
background:transparent;
}

【讨论】：

光看就好了，试试看。虽然不是那么干净对吧，哈哈哈
它不干净，但有时你需要提高生产力:)
我在本地测试过，明天上传。
按照您的建议可以正常工作。就我而言，因为我在那里有一张地图并且需要可拖动，所以做了一些更改。 div 不能有底部的大小，因为挡住了地图。以下是有效的：

#tr-footer{ height: 1px;宽度：100%；背景：透明；边距顶部：-1px； } 谢谢！！！抱歉，目前还不能投票
为什么会这样？（而不是“正常”的边距底部）

【解决方案2】：

接受的答案太复杂了。考虑这种方法 (taken from another thread)：

这是一种正常的怪异行为，称为边距崩溃。为了避免它在 [footer] 容器上添加 overflow: auto;。

您的页脚容器可能如下所示：

.footer-container {
    overflow: auto;
}

【讨论】：

如果我们为父级设置overflow: auto;，position: sticky; 将不起作用。

【解决方案3】：

尝试制作元素

display:inline-block

Safari 应该尊重它的尺寸和边距。

【讨论】：