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

我创建了一个垂直填充页面级进度的圆形垂直进度条。为此，我创建了两个div（外部div和内部div），并且使用边框半径50％和溢出隐藏方式创建了圆形外部div，而内部div的方形和宽度大于外部div的宽度。因此，在页面完成时，内部div的高度会增加，并且会给外部div的填充效果，因为内部div的边缘会被外部div的溢出属性隐藏起来。它在桌面和iPad上运行良好，但在其他触摸设备（主要是移动设备）中运行良好。我正在添加我正在使用的CSS和HTML代码片段。在stackoverflow上有类似的问题，但没有答案解决我的问题，所以请不要把它作为重复的答案，谢谢。CSS溢出隐藏属性在触摸设备上不起作用

#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>

来源

2017-07-29 Aashu.M

你说，在页面内的div增加高度的完成。你为此使用JavaScript吗？如果是，请同时上传代码。（这是不可能的，我重现你的问题..） – flosommerfeld

@flosommerfeld是的，我使用JavaScript更新进度，但它不是JavaScript的问题，因为我只是使用jquery的height（）方法设置它的高度。 –

需要注意以下几点：

你并不需要所有这些立场：绝对;.尽量避免它们。
十分不鼓励十进制像素值
内部元素的宽度不正确。如果你的外在是26px，并且希望移动内部的两个像素离开，这意味着你还需要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>

来源

2017-07-29 12:04:37

感谢您的答复。我使用绝对位置来设置内部div在外部div底部的位置。是的，这是所有触摸设备上不会发生此问题的主要问题，可能此问题仅与移动设备有关。 –

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

回答

相关问题