我为我工作的网站中的新闻开发了不同的响应框。除了主要内容顶部 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 .
提前致谢,伙计们:)
最佳答案
由于继承自您的 .home 文章类,Firefox 正在根据高度 0 解释您的填充。
将您的 CSS 更改为此似乎可以解决我在 Firefox 中的问题,并且不会在 Chrome 中产生不利影响:
.home .first-level-post {
height: 100%;
margin: 0;
padding-top: 45.1613%;
width: 100%;
}
关于html - 仅在 Firefox 中的百分比填充差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32876000/