layui进度条百分比显示错位

使用layui进度条显示百分比的时候进度值有错位，在谷歌浏览器是10-20显示错位，在火狐浏览器是0-20显示错位，如下图，本人是做后端的，前端懂得不多觉得这个问题很诡异，搜了下也没啥解决方案，求懂得友友们解答

该回答引用NewBing

您好，这个问题可能是由于浏览器的兼容性问题导致的。您可以尝试在CSS中添加以下代码来解决这个问题：

.layui-progress .layui-progress-bar-percent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 20px;
    text-align: center;
}

如果这个方法不行，您可以尝试在JS中添加以下代码：

var percent = '20%';
element.progress('demo', percent);

其中，demo是进度条的ID，percent是进度条的百分比。如果您还有其他问题，请告诉我。

源: 与必应的对话， 2023/4/20

• (1) 进度条 - 页面元素 - Layui. http://layui.org.cn/doc/element/progress.html.

• (2) layui进度条渲染不出来？_Forevermoremo的博客-CSDN博客. https://blog.csdn.net/sunny123x/article/details/102563804.

• (3) Layui之进度条_layui进度条_莹酱不想秃头的博客-CSDN博客. https://blog.csdn.net/weixin_46703930/article/details/107097877.

是因为你给了一个固定宽度吧，宽度放不下内容，所以错位了，建议你加一行css代码overflow: visible.加到蓝色那部分。望采纳

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7470932
• 你也可以参考下这篇文章：Layui日期插件闪退问题、谷歌浏览器清空日期插件曾选中值
• 您还可以看一下 任苹蜻老师的从零开发一个iOS企业级项目实战之我的云音乐视频 教程课程中的 如何实现逐行歌词滚动小节, 巩固相关知识点