这是一个简单的HTML示例,其中底部容器在Chrome中具有一个(可能是不合理的)垂直滚动条,而不是Firefox。
<div style="display: flex; flex-direction: column; height: 100px; width: 300px; border: 1px solid black">
<div style="background-color: burlywood; overflow-y: auto">
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
</div>
<div style="background-color: cadetblue; overflow-y: auto;">
<div>Test1</div>
</div>
</div>
正确的渲染是什么?这两个浏览器之间的解释混乱可能是什么原因?
编辑:如何避免这种垂直滚动?这是这里的主要问题。
答案 0 :(得分:0)
我不确定这是否是符合标准的问题。在Firefox中看起来像个小故障。
以下是三点支持证据:
即使在Firefox的下部框中没有出现滚动条,滚动功能仍然有效。只需将鼠标悬停在框上,然后使用鼠标的滚动设备即可上下滚动。正常滚动;您只是看不到滚动条。
从overflow-y: auto
切换到overflow-y: scroll
。这将强制滚动条始终显示。在Firefox中则不是。但是滚动功能仍然可以使用鼠标。
有时,由于我无法确定的原因,滚动条实际上会显示在Firefox的下部框中。
#container {
display: flex;
flex-direction: column;
height: 100px;
width: 300px;
border: 1px solid black;
}
#container > div:first-child {
overflow-y: auto;
background-color: burlywood;
}
#container > div:last-child {
overflow-y: auto;
/* test this: overflow-y: scroll; */
background-color: cadetblue;
}
<div id="container">
<div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
</div>
<div>
<div>Test1<br>Test1<br>Test1<br>Test1</div>
</div>
</div>