Javascript 删除一个类，然后再将其添加回，会导致不同的显示

我有一个css样式的类叫做“line”。单击一个按钮（播放按钮），我从元素“song_info”中删除这个类，然后添加一个名为“standard”的新类。在另一个按钮上单击（暂停按钮），我删除类“标准”，然后重新添加类“行”

功能播放按钮（）{
document.getElementById（'song_info'）.classList.remove（'line'）；
document.getElementById（'song_info'）.classList.add（“标准”）；
}
功能暂停按钮（）{
document.getElementById（'song_info'）.classList.remove（“标准”）；
document.getElementById（'song_info'）.classList.add（“行”）；
}
window.onload=函数（）{
document.getElementById（“play_按钮”）.onclick=play_按钮；
document.getElementById（“暂停按钮”）.onclick=暂停按钮；
}

.css3gradient{
宽度：298px；
高度：180像素；
}
身体{
利润率：10px；
空白：nowrap；
}
#播放按钮{
最高：65%；
左：113px；
位置：绝对位置；
转换：翻译（-50%，-50%）；
}
#暂停按钮{
最高：65%；
左：191px；
位置：绝对位置；
转换：翻译（-50%，-50%）；
}
#歌曲容器{
宽度：198px；
高度：50px；
位置：绝对位置；
溢出：隐藏；
填充：0；
保证金：0；
顶部：50px；
左：60px；
z指数：-2；
}
#相册容器{
宽度：198px；
高度：50px；
位置：绝对位置；
溢出：隐藏；
填充：0；
顶部：72px；
左：60px；
/*z指数：-1*/
}
#歌曲包装{
位置：绝对位置；
溢出：隐藏；
宽度：自动；
身高：100%；
排名：0；
左：0；
z指数：-2；
}
#唱片包装{
位置：绝对位置；
溢出：隐藏；
宽度：自动；
身高：100%；
排名：0；
左：0；
/*z指数：-1*/
}
#歌曲线{
位置：绝对位置；
溢出：隐藏；
位置：相对位置；
/*利润率：15px*/
宽度：自动；
最高：35%；
左：50%；
动画：字幕10s线性无限；
z指数：-2；
}
#第二行{
位置：绝对位置；
溢出：隐藏；
位置：相对位置；
宽度：自动；
最高：50%；
左：50%；
动画：字幕10s线性无限；
z指数：-1；
}
#songWrapper.standard{
利润率：15px；
能见度：可见；
显示：块；
位置：相对位置；
宽度：149px；
高度：45px；
最高：50%；
左：50%；
z指数：-1；
/*
利润上限：11px；
宽度：200px；
能见度：可见；
位置：绝对位置；
顶部：20px；
左20像素；
*/
转换：翻译（-50%，-50%）；
}
#相册span.standard{
利润率：15px；
能见度：可见；
显示：块；
位置：相对位置；
宽度：149px；
高度：45px；
最高：50%；
左：50%；
z指数：-1；
/*
利润上限：11px；
宽度：200px；
能见度：可见；
位置：绝对位置；
顶部：20px；
左20像素；
*/
转换：翻译（-50%，-50%）；
}
@关键帧选框{
0% {
左-17%；
}
100% {
左-50.4%；
}
}

没有歌曲正在播放！！！没有歌曲正在播放！！！没有歌曲正在播放！！！
相册越来越长相册越来越长相册越来越长相册越来越长
玩
暂停

我认为您发现了一个bug，它是从年的WebCore继承的（Blink最初是WebCore的分支）。它可能值得向WebKit项目报告，也可能值得向Blink所属的Chromium项目报告

我的评估基于：

• 相同的类确实应该导致相同的显示
• 这个问题发生在诸如Brave、Chrome、基于Chrome的Edge和Safari（WebKit）等浏览器上，而在Firefox（使用Gecko）或Legacy Edge（使用EdgeHTML）上则没有

以下是由创建的解决方法，请参见代码中的注释：

功能播放按钮（）{
document.getElementById（'song_info'）.classList.remove（'line'）；
document.getElementById（'song_info'）.classList.add（“标准”）；
}
功能暂停按钮（）{
document.getElementById（'song_info'）.classList.remove（“标准”）；
document.getElementById（'song_info'）.classList.add（“行”）；
}
window.onload=函数（）{
document.getElementById（“play_按钮”）.onclick=play_按钮；
document.getElementById（“暂停按钮”）.onclick=暂停按钮；
}

.css3gradient{
宽度：298px；
高度：180像素；
}
身体{
利润率：10px；
空白：nowrap；
}
#播放按钮{
最高：65%；
左：113px；
位置：绝对位置；
转换：翻译（-50%，-50%）；
}
#暂停按钮{
最高：65%；
左：191px；
位置：绝对位置；
转换：翻译（-50%，-50%）；
}
#相册容器{
宽度：198px；
高度：50px；
位置：绝对位置；
溢出：隐藏；
填充：0；
顶部：72px；
左：60px；
//z指数：-1；
}
#歌曲包装{
位置：绝对位置；
溢出：隐藏；
宽度：自动；
身高：100%；
排名：0；
左：0；
z指数：-2；
}
#唱片包装{
位置：绝对位置；
溢出：隐藏；
宽度：自动；
身高：100%；
排名：0；
左：0；
}
#第二行{
溢出：隐藏；
位置：相对位置；
宽度：自动；
最高：50%；
左：50%；
动画：字幕10s线性无限；
z指数：-1；
}
#相册span.standard{
利润率：15px；
能见度：可见；
显示：块；
位置：相对位置；
宽度：149px；
高度：45px；
最高：50%；
左：50%；
z指数：-1；
转换：翻译（-50%，-50%）；
}
@关键帧选框{
0% {
左-17%；
}
100% {
左-50.4%；
}
}
#歌曲线{
/*删除顶部和右侧属性*/
位置：相对位置；
宽度：自动；
溢出：隐藏；
动画：字幕10s线性无限；
z指数：-2；
}
#songWrapper.standard{
/*无需更改为块元素
因此，在本课程中真正重要的是删除动画*/
动画：无；
}
#歌曲容器{
/*现在，我们将此元素向下移动，使其接近#albumContainer*/
位置：绝对位置；
溢出：隐藏；
宽度：198px；
高度：30px；
/*降低高度*