Firefox中的范围滑块端点被截断

Question

我正在研究reasonably cross-browser native range slider的CSS。在Chrome中，端点很好但在Firefox中它们是截止的。如何将它们标准化为不在Firefox中被截断？

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Never use “ or ” in code unless it's pure text. Use " or ' instead-->


<div id="content">
  <span>Here is </span>
  <a href="#/" id="firstLink">The Link</a>
  <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" id='firstImage'>
    <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" id='secondImage'>
  <p>Here is
    <a href="#/" id="secondLink">The Second Link</a>
  </p>
</div>

SCSS

io.connect("http://example.com/")

Answer 1

我想最简单的答案是将overflow =“visible”添加到第二个<svg>元素。

更好的解决方案不是首先绘制svg画布的边缘，即通过从大于0％的x值开始并稍后完成从边缘移动文本100％。