html - CSS 溢出属性仅在 Firefox 中具有不同的行为

Question

我有一个播放列表作为视频的叠加层，应该是可滚动的。

.playlist{
    height: 150px;
    overflow-y: scroll;
    border: 3px solid red;
}

.playlist li:before {
    content: " ";
    display: block;
    height: 50px;
    border: 1px solid #000;
}

.playlist li {
    height: 50px;
}

.playlist li span {
    display: block;
    height: 50px;
    position: relative;
    top: -50px;
    left: 10px;
}

此处情况的 jsfiddle 示例:http://jsfiddle.net/41unLxwk/4/

我使用 :before 选择器来显示播放和暂停按钮，并且文本是相对定位的。在这种情况下，最后会有一个空格(仅在 firefox 中)。

我知道如果你不使用 :before 和相对定位就不会发生这种情况，但也许有另一种方法可以解决这个问题。

编辑:澄清一下，问题是在 firefox 中这个例子中有太多的 overflow-y。我不是在谈论 x 轴。

Answer 1

问题是相对定位元素的偏移量不会影响其他元素，所以如果您不移动它们，您会看到 span 所在的空间。

你可以修复它添加

.playlist > ul {
    overflow: hidden;
}

.playlist {
  height: 150px;
  overflow-y: scroll;
  border: 3px solid red;
}
.playlist ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.playlist li:before {
  content: " ";
  display: block;
  height: 50px;
  border: 1px solid #000;
}
.playlist li:not(:first-child):before {
  border-top: none;
}
.playlist li {
  height: 50px;
}
.playlist li span {
  display: block;
  height: 50px;
  position: relative;
  top: -50px;
  left: 10px;
}

<div class="playlist">
  <ul>
    <li>
      <span>Song_1</span>
    </li>
    <li>
      <span>Song_2</span>
    </li>
    <li>
      <span>Song_3</span>
    </li>
    <li>
      <span>Song_4</span>
    </li>
    <li>
      <span>Song_5</span>
    </li>
  </ul>
</div>

但是，考虑一些更简单的事情，比如

.playlist > ul > li {
  height: 50px;
  border: 1px solid #000;
  margin-top: -1px;
}
.playlist > ul > li:last-child {
  border-bottom: none;
}

.playlist {
  height: 150px;
  overflow-y: scroll;
  border: 3px solid red;
}
.playlist > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.playlist > ul > li {
  height: 50px;
  border: 1px solid #000;
  margin-top: -1px;
}
.playlist > ul > li:last-child {
  border-bottom: none;
}

<div class="playlist">
  <ul>
    <li>Song_1</li>
    <li>Song_2</li>
    <li>Song_3</li>
    <li>Song_4</li>
    <li>Song_5</li>
  </ul>
</div>