Firefox中具有有限高度和垂直滚动条的绝对定位列表元素的宽度错误

Question

我有一个绝对定位的菜单元素，高度有限。因此应该出现垂直滚动条。下面是我的代码的简化版本。

在Edge，Chrome 63，IE11的Windows 10上运行它看起来很不错。这意味着文本是可见的，填充是左右。

但是在Firefox 57.0.4中，文本从右侧略微剪切。在我看来，与其他浏览器不同，Firefox不会为滚动条保留空间。

有没有办法解决它？

ul, li {
  margin: 0;
  padding: 0;
}

ul {
  position: absolute;
  border: 1px solid black;
  list-style: none;
  max-height: 120px;
  overflow-x: hidden;
  overflow-y: auto;
}

li {
  padding: 5px 15px;
}

span {
  white-space: nowrap;
}

<ul>
  <li><span>test text</span></li>
  <li><span>test text</span></li>
  <li><span>test text</span></li>
  <li><span>test text</span></li>
  <li><span>test text</span></li>
</ul>

Answer 1

使用overflow-y:scroll;代替auto进行尝试，有些浏览器不会像其他浏览器一样解释自动。