CSS 溢出隐藏属性在触摸设备上不起作用

Question

我创建了一个圆形垂直进度条，它垂直填充页面级进度。为此，我创建了两个 div（外部 div 和内部 div），并使用边界半径 50% 制作了圆形外部 div，并隐藏了溢出，内部 div 具有方形且宽度大于外部 div 的宽度。因此，在页面完成时，内部 div 的高度会增加，并且当内部 div 的边缘被外部 div 的溢出属性隐藏时，它会产生圆形外部 div 的填充效果。它在台式机和 iPad 上运行良好，但在其他触摸设备（主要是移动设备）上运行良好。我正在添加我正在使用的 css 和 HTML 的 sn-p。 stackoverflow上有类似的问题，但没有一个答案能解决我的问题，所以请不要把它当作重复的答案，谢谢。

#progress-container {
  position: absolute;
  top: 100px;
  left: 100px;
}

#progress-indicator-outer {
  position: absolute;
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #999999;
  overflow: hidden;
}

#progress-indicator-inner {
  position: absolute;
  bottom: 0px;
  width: 28px;
  height: 12.5px;
  margin: 0px 0 0 -2px;
  background: #007BAf;
}

<div id="progress-container">
  <div id="progress-indicator-outer">
    <div id="progress-indicator-inner"></div>
  </div>
</div>

Answer 1

注意事项：

• 您不需要所有这些位置：absolute;。尽量避开它们。
• 强烈建议不要使用十进制像素值
• 内部元素的宽度不正确。如果你的外边是26px，而你想把内边的2px向左移动，这意味着你还需要在另一边2px，最后是30px
• 我测试了以下内容，这适用于我的移动设备

#progress-container {
  position: absolute;
  top: 100px;
  left: 100px;
}

#progress-indicator-outer {
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #999999;
  overflow: hidden;
}

#progress-indicator-inner {
  position: relative;
  width: 30px;
  height: 13px;
  top: -2px;
  left: -2px;
  background: #007BAf;
}

<div id="progress-container">
  <div id="progress-indicator-outer">
    <div id="progress-indicator-inner"></div>
  </div>
</div>