应用于音频元素的样式在firefox和safari中有效，但在chrome中无效

Question

我使用HTML/CSS/JS创建了一个音频播放器，这里是一个包含它的代码依赖- https://codepen.io/terramsc/pen/YzerzYw?editors=1100

HTML:

<div id="player">
<div id="color-switch"><img src="https://i.imgur.com/SYyiJUa.png">

<div id="volume-slider-container">
<output id="volume-output">100</output>
<div id="volume-slider-squish"><input type="range" id="volume-slider" max="100" value="70"></div>
<button id="mute-icon"></button>
</div>

<div id="audio-player-container">
<audio src="https://assets.codepen.io/4358584/Anitek_-_Komorebi.mp3" preload="metadata" loop></audio>

<button id="play-icon"></button>
<span id="current-time" class="time">0:00</span>
<input type="range" id="seek-slider" max="100" value="0">
<span id="duration" class="time">0:00</span>

</div>
</div>
</div>

CSS:

/* OVERLAY */
#color-switch {
width: 100%;
max-width: 608px;
height: 100%;
max-height: 38px;
position: relative;
}
#color-switch img {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
z-index: 99;
mix-blend-mode: lighten;
pointer-events: none;
}
button {
padding: 0;
margin-top: 4px;
border: 0;
cursor: pointer;
outline: none;
width: 25px;
height: 25px;
}
/* WRAPS */
#player {
max-height: 80px;
height: 100%;
max-width: 608px;
width: 100%;
z-index: 999;
}
#audio-player-container {
--seek-before-width: 0%;
--volume-before-width: 100%;
--buffered-width: 0%;
position: relative;
max-width: 600px;
height: 32px;
border: 4px solid white;
z-index: 1;
/* background color */
background-color: #000;
}
#volume-slider-container {
position: absolute;
display: flex;
top: -30px;
max-width: 608px;
width: 100%;
height: 20px;
content-align: center;
justify-content: space-between;
align-items: center;
gap: 5px;
opacity: 0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#player:hover #volume-slider-container {
opacity: 1;
}
#audio-player-container::before {
position: absolute;
content: '';
}
#play-icon {
position: absolute;
left: 0; 
right: 0; 
margin-left: auto; 
margin-right: auto; 
width: 25px;
height: 25px;
transform: scale(1.2);
z-index: 1;
filter: invert(1);
mix-blend-mode: difference;
background: transparent;
}
path {
stroke: #fff;
fill: #fff;
mix-blend-mode: difference;
object-fit: cover;
}
.time {
width: 32px;
text-align: center;
line-height: 32px;  
color: #fff;
mix-blend-mode: difference;
font-weight: 700;
letter-spacing: -1px;
font-size: 14px;
font-family: 'Inter', sans-serif;
}
#current-time {
position: absolute;
left: 10px;
z-index: 1;
}
#duration {
position: absolute;
right: 10px;
z-index: 1;
}
input[type="range"] {
position: relative;
-webkit-appearance: none;
width: 100%;
margin: 0;
padding: 0;
height: 32px;
float: left;
border-radius: 0;
z-index: 0;
cursor: default;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 32px;
cursor: default;
/* COLOR AFTER */
background-color: #000;
}
input[type="range"]::before {
position: absolute;
content: "";
left: 0;
width: var(--seek-before-width);
height: 32px;
/* COLOR BEFORE */
background-color: #fff;
cursor: default;
}
input[type="range"]::-webkit-slider-thumb {
opacity: 0;
cursor: default;
}
input[type="range"]:hover::-webkit-slider-thumb {
opacity: 0;
cursor: default;
}
input[type="range"]:active::-webkit-slider-thumb {
opacity: 0;
cursor: default;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 32px;
cursor: default;
background-color: black;
}
input[type="range"]::-moz-range-progress {
background-color: white;
height: 32px;
}
input[type="range"]::-moz-focus-outer {
border: 0;
cursor: default;
}
input[type="range"]::-moz-range-thumb {
opacity: 0;
cursor: default;
}
input[type="range"]:active::-moz-range-thumb {
opacity: 0;
cursor: default;
}
input[type="range"]::-ms-track {
width: 100%;
height: 32px;
cursor: default;
background: transparent;
}
input[type="range"]::-ms-fill-lower {
background-color: transparent;
cursor: default;
}
input[type="range"]::-ms-fill-upper {
background: transparent;
cursor: default;
}
input[type="range"]::-ms-thumb {
opacity: 0;
cursor: default;
}
input[type="range"]:active::-ms-thumb {
opacity: 0;
cursor: default;
}
output {
width: 18px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 12px;
float: left;
clear: left;
color: #fff;
float: left;
}
#volume-slider {
float: left;
}
#volume-slider-squish {
width: 100%;
height: 4px;
float: left;
background-color: blue;
}
#volume-slider::-webkit-slider-runnable-track {
background: rgba(0, 0, 0, 1);
float: left;
height: 4px;
}
#volume-slider::-moz-range-track {
background: rgba(0, 0, 0, 1);
float: left;
height: 4px;
}
#volume-slider::-ms-fill-upper {
background: rgba(0, 0, 0, 1);
float: left;
height: 4px;
}
#volume-slider::before {
width: var(--volume-before-width);
float: left;
height: 4px;
}
#volume-slider-squish > input[type="range"] {
height: 4px;
}
#volume-slider-squish > input[type="range"] {
height: 4px;
}
#volume-slider-squish > input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
}
#volume-slider-squish > input[type="range"]::before {
height: 4px;
}
#volume-slider-squish > input[type="range"]::-webkit-slider-thumb {
height: 4px;
width: 4px;
background-color: #fff;
transform: scale(1);
opacity: 1;
}
#volume-slider-squish > input[type="range"]:hover::-webkit-slider-thumb {
height: 4px;
width: 4px;
transform: scale(1);
opacity: 1;
}
#volume-slider-squish > input[type="range"]:active::-webkit-slider-thumb {
height: 4px;
width: 4px;
transform: scale(1);
opacity: 1;
}
#volume-slider-squish > input[type="range"]::-moz-range-track {
height: 4px;
}
#volume-slider-squish > input[type="range"]::-moz-range-progress {
height: 4px;
}
#volume-slider-squish > input[type="range"]::-moz-focus-outer {
height: 4px;
}
#volume-slider-squish > input[type="range"]::-moz-range-thumb {
height: 4px;
}
#volume-slider-squish > input[type="range"]:active::-moz-range-thumb {
height: 4px;
}
#volume-slider-squish > input[type="range"]::-ms-track {
height: 4px;
}
#volume-slider-squish > input[type="range"]::-ms-fill-lower {
height: 4px;
}
#volume-slider-squish > input[type="range"]::-ms-fill-upper {
height: 4px;
}
#volume-slider-squish > input[type="range"]::-ms-thumb {
height: 4px;
}
#volume-slider-squish > input[type="range"]:active::-ms-thumb {
height: 4px;
}
#mute-icon {
float: left;
width: 18px;
height: 18px;
margin-top: -1px;
background: transparent;
}

我在safari和Firefox中测试了我的代码，它似乎工作正常，如下所示:

然而，当我在Chrome中打开它时，它看起来像这样:player in Chrome

有两个问题:第一，在Firefox上看不到音量滑块上的拇指，但在Chrome上显示为蓝点;第二，在Firefox上显示白色进度条，但在Chrome上没有。

我尽了最大的努力，修改了许多属性，但没有效果。我试了好几个小时还是不能用

Answer 1

有两个问题，第一-音量滑块上的拇指在Firefox上不可见，但在Chrome上显示为蓝点，第二-白色进度条在Firefox上显示，但在Chrome上不显示。

Chrome和Firefox都有一个白色的进度条，但是没有音量滑块。
你的#volume-slidercss样式隐藏了整个元素的样式。改为:

#volume-slider {
opacity: 1; /* now styling is visible */

position: relative;
z-index: 10;
transform: scaleY(5.5);
}

现在你可以随意调整滑块的样式了，但是不要忘记删除webkit样式:

#volume-slider-squish > input[type="range"]::-webkit-slider-thumb {
height: 6px;
width: 28px;
-webkit-appearance: none; /* remove webkit styling */
appearance: none; /* remove webkit styling */
background-color: #fff;
border-radius: 8px;
margin-top: -1px;
transform: scale(1);
opacity: 1;
}  

对hover和active也这样做。