html - 如何在所有跨浏览器中为 HTML 标签类型 ="range"设计独特的 CSS 布局？

标签 html css

我正在使用纯 CSS(无 javascript)设计一个 FM 播放器，并在 Chrome、Firefox、Internet Explorer (IE) 和 Edge 浏览器中测试了布局。除 Internet Explorer 外，布局显示 99% 的准确度如下。

Chrome Layout

IE下的布局如下图，

Internet Explorer Layout

是否有可能在所有跨浏览器(Opera、Safari 等其他浏览器)中获得 100% 的布局准确性？

使用的 HTML 代码如下，

<body>
    <div id="player">
        <audio id="musicPlayer" autoplay="autoplay">
            <source src="hls.mp3"/>
        </audio>
        <span id="playPause" onclick="playPause()"><img src="images/play.png" id="playMusic"/></span>
        <span id="time">00:00:00</span>
        <span id="volumeIcon"><img src="images/volume.png" id="volume"/></span>
        <input type="range" id="changeVolume" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)" step="1" min="0" max="100" value="100"/>
    </div>
</body>

下面是CSS代码，

body {
    width:100%;
    margin:0 auto;
    padding:0px;
    font-family:helvetica;
}
#player {
    width:400px;
    margin:0 auto;
    padding:5px;
    box-sizing:border-box;
    border-radius: 4px;
    border: 1px outset darkgreen;
    box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;
    background-image: linear-gradient(lightgreen, PaleGreen, lightgreen);
}
#time {
    float:left;
    height:20px;
    line-height:20px;
    margin-left:2px;
    margin-right:5px;
    margin-top:3px;
}
#playMusic, #pauseMusic {
    float:left;
    height:18px;
    margin-left:2px;
    margin-right:5px;
    margin-top:3px;
    cursor: default;
    border-radius: 3px;
    border: 1px solid limegreen;
    background-image: linear-gradient(lightgreen, PaleGreen, lightgreen);
    outline:none;
}
#playMusic:hover, #pauseMusic:hover {
    background:#94d362;
    border-radius: 3px;
    border: 1px solid ForestGreen;
    background-color:lightgreen;
    background: hsl(100, 100%, 85%);
}
input[type=range] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 120px;
    height:18px;
    line-height:18px;
    margin-left:2px;
    margin-right:5px;
    margin-top:3px;
    position: absolute;
    background-color: transparent;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0;
    background: #228442;
    border-radius: 3px;
    border: 0;
}
input[type=range]::-webkit-slider-thumb {
    box-shadow: 0;
    border: 0;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background: darkgreen;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -4px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #228442;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0;
    background: #228442;
    border-radius: 3px;
    border: 0;
}
input[type=range]::-moz-range-thumb {
    box-shadow: 0;
    border: 0;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background: darkgreen;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -4px;
}
input[type=range]::-ms-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 3px 0;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #228442;
    border: 0;
    border-radius: 3px;
    box-shadow: 0;
}
input[type=range]::-ms-fill-upper {
    background: #228442;
    border: 0;
    border-radius: 3px;
    box-shadow: 0;
}
input[type=range]::-ms-thumb {
    box-shadow: 0;
    border: 0;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background: darkgreen;
    cursor: pointer;
    margin: 0;
}
input[type=range]:focus::-ms-fill-lower {
    background: #228442;
}
input[type=range]:focus::-ms-fill-upper {
    background: #228442;
}
#volume {
    margin-left:134px;
    width:20px;
}

现场测试网址:https://biox.ml/fm

最佳答案

经过一些研究，我终于发现你应该使用 flex positioning (IE11 支持)。

  • 首先，我编辑了 HTML 设计以使用 block 元素(并将音量图标和范围输入打包在一起以简化 CSS 样式)。
  • 我为 div#player 设置了一个 display:flex 以启用 flex 定位。
  • 我将 flex-grow:1 放入 div#time 以让它填充剩余空间。
  • 我在 div#volume 中添加了一个 align-items:center 样式来垂直对齐 range input和 align-content:flex-end 将音量框放置在 div#player 的右侧。
  • 最后，对于 IE11，我将 range input 的顶部和底部填充设置为 0，并将高度设置为 100%，否则 IE 会裁剪拇指。<
  • 此外，对整理和代码清理进行了一些小改动。

body {
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  font-family: helvetica;
}


/* Beginning of the edited part */

#player {
  display: flex;
  height: 28px;
  width: 400px;
  align-items: center;
  margin: 0 auto;
  padding: 0 5px 0 5px;
  background-image: linear-gradient(lightgreen, PaleGreen, lightgreen);
  border-radius: 4px;
  border: 1px outset darkgreen;
  box-sizing: border-box;
  box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;
}

div#playPause,
div#volume {
  height: 18px;
}

div#playPause {
  margin-right: 5px;
  border: 1px solid limegreen;
  border-radius: 3px;
  outline: none;
}

div#volume {
  display: flex;
  align-items: center;
  align-content: flex-end;
}

div#playPause img,
div#volume img {
  height: 100%;
}

div#time {
  flex-grow: 1;
}

div#volume input[type=range] {
  width: 120px;
	height:100%;
  margin: 0;
  padding: 0 0 0 5px;
  /* 0 paddings is important here */
  background-color: transparent;
}

div#volume input[type=range]:focus {
  outline: none;
}


/* End of the edited part
  Below untouched specific-browser styling the "skin" of the range input
  "Untouched" except the prefix "div#volume"
*/

div#volume input[type=range] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

div#volume input[type=range]:focus {
  outline: none;
}

div#volume input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0;
  background: #228442;
  border-radius: 3px;
  border: 0;
}

div#volume input[type=range]::-webkit-slider-thumb {
  box-shadow: 0;
  border: 0;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background: darkgreen;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4px;
}

div#volume input[type=range]:focus::-webkit-slider-runnable-track {
  background: #228442;
}

div#volume input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0;
  background: #228442;
  border-radius: 3px;
  border: 0;
}

div#volume input[type=range]::-moz-range-thumb {
  box-shadow: 0;
  border: 0;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background: darkgreen;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4px;
}

div#volume input[type=range]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 3px 0;
  color: transparent;
}

div#volume input[type=range]::-ms-fill-lower {
  background: #228442;
  border: 0;
  border-radius: 3px;
  box-shadow: 0;
}

div#volume input[type=range]::-ms-fill-upper {
  background: #228442;
  border: 0;
  border-radius: 3px;
  box-shadow: 0;
}

div#volume input[type=range]::-ms-thumb {
  box-shadow: 0;
  border: 0;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background: darkgreen;
  cursor: pointer;
  margin: 0;
}

div#volume input[type=range]:focus::-ms-fill-lower {
  background: #228442;
}

div#volume input[type=range]:focus::-ms-fill-upper {
  background: #228442;
}
<div id="player">
  <audio id="musicPlayer" autoplay="autoplay">
		<source src="hls.mp3"/>
	</audio>
  <div id="playPause" onclick="playPause()">
    <img src="https://biox.ml/fm/images/play.png" id="playMusic" />
  </div>
  <div id="time">00:00:00</div>
  <div id="volume">
    <img src="https://biox.ml/fm/images/volume.png" id="playMusic" />
    <input type="range" id="changeVolume" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)" step="1" min="0" max="100" value="100" />
  </div>
</div>

关于html - 如何在所有跨浏览器中为 HTML 标签类型 ="range"设计独特的 CSS 布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53204828/

上一篇：html - 输入不可点击

下一篇：javascript - 使用 Javascript 在特定单词后添加中断

相关文章：

css - Google Fonts 示例页面和单独页面中的用法之间的 Barlow 渲染差异

html - 我可以从悬停元素继承背景颜色吗？

JavaScript - 使用 px 获取元素高度值

html - 如何使用 Fancybox 在一页上制作多个画廊？

html - 在 Bootstrap 中将缩略图设为链接会使其不居中

html - 具有固定高度的父项和 100% 高度的内部表格无法按预期工作

html - 嵌套的 Div 无法与内容正确堆叠

html - 过滤器不透明度不适用于复选框(IE8)

javascript - 查找与当前元素相关的文本框

css - 列表中列表上的向下箭头

©2024 IT工具网  联系我们