仅在 Firefox 中的百分比填充差异答案

【问题标题】：Percentage padding difference only in Firefox仅在 Firefox 中的百分比填充差异
【发布时间】：2015-12-28 19:46:48
【问题描述】：

我为我正在工作的网站中的新闻开发了不同的响应框。除了主要内容顶部滑块内的新闻之外，一切似乎都运行良好。它在 Chrome、Opera 甚至 Internet Explorer 中都能正常显示，但在 Firefox 中却不能。问题似乎出在article 元素中，特别是在以下几行 CSS 代码中：

.home .first-level-post {
    margin: 0px;
    width: 100%;
    padding-top: 45.1613%;
}

它应该有280px 的height，这就是为什么我选择45.1613% 作为它的值。容器的width是620px，它的45.1613%是280px。

当我关闭padding-top 属性时，它会采用属于滑块外部的article 元素的93.3333% 值（300 像素宽），按应有的方式显示，但该值不起作用在其他浏览器中。

我一直在处理这个问题，但我似乎无法找到解决方案。您可以正确检查此问题right here。

提前谢谢各位:)

【问题讨论】：

【解决方案1】：

由于继承自您的 .home 文章类，Firefox 正在根据高度 0 解释您的填充。

将您的 CSS 更改为此似乎可以解决我在 Firefox 中的问题，并且在 Chrome 中没有负面影响：

.home .first-level-post {
    height: 100%;
    margin: 0;
    padding-top: 45.1613%;
    width: 100%;
}

【讨论】：