Question

我在Firefox中遇到这个问题：

出于某种原因，它在Firefox中缩小，就像它无法计算高度一样。

Chrome和Edge都正确显示它，但是为了显示相同的结果我需要将高度设置为90vh，就像它的父级一样。

css如下：改变高度：100％到90vh工作。但我不明白为什么。

.themes-outercontainer
{
    position: relative;
    display: table;
    width: 100%;
    height: 90vh;
}

.themes-container
{
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

Answer 1

<script> var modal = document.getElementById('Modal01'); var img = document.getElementById('TheImage'); var modalImg = document.getElementById("img01"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } var span = document.getElementsByClassName("close")[0]; span.onclick = function() { modal.style.display = "none"; } </script>覆盖了.themes-container，因此未应用display: flex。当您使用flexbox属性时，您无法以这种方式管理display: table-cell属性。

另一个问题是height是.themes-whiteoverlay，因此高度并不像您预期的那样有效。

请尝试考虑您的偏好：flexbox或table，如果您不知道它是如何工作的，请尝试删除绝对定位。

Answer 2

与其他浏览器不同，Firefox不会假设屏幕的实际高度，因此必须使用视点高度单位来计算出来。我认为唯一的例外是身体元素

例如，假设您在Math中遇到了一个问题。老师希望你找到50％的未知数字。你会怎么做？你不能，所以你必须要求这个数字。

解决Firefox无法工作百分比高度的原因

2 个答案: