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

Question

我为我工作的网站中的新闻开发了不同的响应框。除了主要内容顶部滑块内的新闻外，一切似乎都运行良好。它在 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 属性时，它采用 93.3333% 值，该值属于滑块外部的 article 元素（宽度为 300 像素） , 正常显示，但该值在其他浏览器中不起作用。

我已经处理这个问题一段时间了，但似乎找不到解决方案。你可以好好检查一下这个issue right here.

提前致谢，伙计们:)

Answer 1

由于继承自您的 .home 文章 class。

，Firefox 正在根据高度 0 解释您的填充

将您的 CSS 更改为此似乎解决了我在 Firefox 中的问题，并且对 Chrome 没有不利影响：

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

Percentage padding difference only in Firefox