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

Question

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

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

它的高度应该是280px，这就是我选择45.1613%作为它的值的原因。容器的宽度为620px，45.1613%为280px。

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

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

提前致谢，伙计们:)

Answer 1

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

将您的 CSS 更改为此似乎可以解决我在 Firefox 中的问题，并且不会在 Chrome 中产生不利影响:

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