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

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

转载作者：行者123 更新时间：2023-11-28 14:38:34

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

IE下的布局如下图，

是否有可能在所有跨浏览器(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/

文章推荐： javascript - 如何在头脚本中添加动态信息？

文章推荐： ios - 试图删除 backBarButtonItem 的标题

文章推荐： html - 使用动态样式表语言有什么缺点吗？

文章推荐： html - 输入不可点击

prometheus - 哪些用例真正使普罗米修斯的汇总指标类型成为必要/独特？
对于 Prometheus 指标集合，如标题，我真的找不到只能通过 type Summary 完成的用例。，似乎它们都可以通过 type Histogram 以某种方式完成还。让我们以请求并发度量
r - 不区分大小写独特保持原样
这个问题在这里已经有了答案: Ignore case while using duplicated (1 个回答) 关闭 9 个月前。使用不区分大小写的 unique(tolower(x)) 删除
azure - 如何收到新(独特)错误的警报
应用程序监控服务的一个有用功能是每次发生新的、独特的错误/问题/异常时发送警报(例如电子邮件)(即不是每次发生)。要么只是第一次，要么最多每次 X 次(一天或一周等)。例如，这可以通过 Visual
azure - 如何收到新(独特)错误的警报
应用程序监控服务的一个有用功能是每次发生新的、独特的错误/问题/异常时发送警报(例如电子邮件)(即不是每次发生)。要么只是第一次，要么最多每次 X 次(一天或一周等)。例如，这可以通过 Visual
group-by - DB2 独特 + xmlagg 查询
我想要相当于 DB2 中 MySql 的 GROUP_CONCAT 功能。我尝试过 DB2 的 XML Aggrigate 函数来合并 murows。 SELECT a.ID, sub
python - 雪花和 SQLAlchemy "unexpected ' 独特'
我正在运行 python 数据库迁移脚本 (Flask-Migrate) 并添加了 alembic.ddl.imp import DefaultImpl 来解决第一组错误，但现在我收到以下错误。我正在
bash - 排序 |独特 | xargs grep ... 其中行包含空格
我有一个逗号分隔的文件“myfile.csv”，其中第 5 列是日期/时间戳。 (mm/dd/yyyy hh:mm)。我需要列出所有包含重复日期的行(有很多) 我正在通过 cygwin 为 WinX
MySQL 5.7 | MySQL 5.7分组依据 |独特|聚合错误
我使用的是 MySQL 5.7。我有一个表格如下: -------------------------------------------------- | id | currentcy_id |
javascript - ng-repeat 中的 Angular 独特 ng-model
所以我有一个像这样的 ng-repeat: Join Ride /md-switch> 但是，每个 md-switch 都有相同的模型，因此当我在 Control
node.js - Mongoose 独特 :true pre-save hook calls hook before validation
据我了解， Mongoose 预保存 Hook 在将文档插入集合之前但在验证发生之后触发。因此，如果一次验证失败，则不会调用预保存 Hook 。就我而言，无论如何都会调用它们: 下面的简单代码的作用
awk - 重现 grep "my pattern"myfile.log |排序 |独特 | awk 中的 wc -l
如果我对我的目标文件执行此 grep，我会得到例如 275 作为结果。但是我想学习 awk，所以在 awk 中尝试了这个: awk 'BEGIN { count=0 } /my pattern/

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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