null

null

ul {
  display: flex;
  height: 20%;
  background-color: #242424;
  list-style: none;

  margin: 0;
  padding: 8px;
  padding-right: 0;

  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #a7a7a7 #242424;
}

ul::-webkit-scrollbar {
  height: 6px;
}
ul::-webkit-scrollbar-track {
  background-color: #242424;
}
ul::-webkit-scrollbar-thumb {
  background-color: #a7a7a7;
}

ul:focus {
  outline: none;
}

li {
  display: block;
  height: 100%;
  padding-right: 12px;
  position: relative;
}

li img {
  display: block;
  height: 100%;
}

li .index {
  position: absolute;
  right: 16px;
  bottom: 4px;
  color: white;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
}

<ul style="height: 200px;">
<li>
  <img src="https://placeimg.com/1000/600/any?0">
  <span class="index">1</span>
</li>
<li>
  <img src="https://placeimg.com/1000/600/any?1">
  <span class="index">2</span>
</li>
<li>
  <img src="https://placeimg.com/1000/600/any?2">
  <span class="index">3</span>
</li>
<li>
  <img src="https://placeimg.com/1000/600/any?3">
  <span class="index">4</span>
</li>
<li>
  <img src="https://placeimg.com/1000/600/any?4">
  <span class="index">5</span>
</li>
<li>
  <img src="https://placeimg.com/1000/600/any?5">
  <span class="index">6</span>
</li>
<li>
  <img src="https://placeimg.com/1000/600/any?6">
  <span class="index">7</span>
</li>
<li>
  <img src="https://placeimg.com/1000/600/any?7">
  <span class="index">8</span>
</li>
<li>
  <img src="https://placeimg.com/1000/600/any?8">
  <span class="index">9</span>
</li>
<li>
  <img src="https://placeimg.com/1000/600/any?9">
  <span class="index">10</span>
</li>
<li>
  <img src="https://placeimg.com/1000/600/any?10">
  <span class="index">11</span>
</li>
</ul>

null

在Chromium中，它工作得很好，但是在Firefox中，当滚动条显示时，