javascript - 为什么 CSS' 在 mozilla firefox 和 Internet Explorer 中无法正常工作?
问题描述
我正在使用 html css 和 javascript 设计缩放控件,但它不能在所有浏览器中正常工作。
我正在使用 css 将范围输入作为缩放滑块,将 div 作为 Joystiq 导航控件,它在 google chrome 中运行良好,但在 mozilla firefox 和 Internet Explorer 中不起作用。
$(document).ready(function () {
$('#pan_circle').draggable({
containment: "#parent_pan",
revert: true,
revertDuration: 50
});
});
document.getElementById("plus_zoom").addEventListener("mousedown", magnifyControl);
document.getElementById("plus_zoom").addEventListener("mouseup", normalControl);
document.getElementById("plus_zoom").addEventListener("click", zoomIn);
document.getElementById("minus_zoom").addEventListener("mousedown", magnifyControl);
document.getElementById("minus_zoom").addEventListener("mouseup", normalControl);
document.getElementById("minus_zoom").addEventListener("click", zoomOut);
function magnifyControl(e) {
e.target.style.opacity = "0.25";
}
function normalControl(e) {
e.target.style.opacity = "1";
}
function zoomIn() {
var zoom = document.getElementById("zoom_slider").value;
document.getElementById("zoom_slider").value = zoom - (-25);
}
function zoomOut() {
var zoom = document.getElementById("zoom_slider").value;
document.getElementById("zoom_slider").value = zoom - 25;
}
input[type=range][orient=vertical] {
width: 184px;
transform: rotate(-90deg);
transform-origin: top;
position: relative;
left: -87px;
bottom: -52px;
}
.zoom_slider {
-webkit-appearance: none;
height: 2px;
border-radius: 5px;
background: black;
outline: none;
opacity: 0.5;
transition: opacity .2s;
}
.zoom_slider:hover {
opacity: 0.7;
}
.zoom_slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: black;
cursor: pointer;
}
.zoom_slider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: black;
cursor: pointer;
}
.zoom_slider:hover::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: black;
cursor: pointer;
}
.zoom_slider:hover::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: black;
cursor: pointer;
}
.zoom_range {
position: absolute;
top: 140px;
left: 30px;
background-color: #CFD1CE;
height: 225px;
width: 12px;
border-radius: 3px;
}
.zoom_hr1 {
border-color: white;
position: relative;
top: -23px;
}
.zoom_hr2 {
border-color: white;
position: relative;
top: 125px;
}
#zoom_polygon {
position: relative;
top: 50px;
}
.plus_zoom {
position: relative;
left: 2px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.minus_zoom {
position: relative;
left: 3px;
top: 100px;
font-size: 17px;
font-weight: bold;
cursor: pointer;
}
#panning_container {
height: 70px;
width: 70px;
background-color: #CFD1CE;
-webkit-clip-path: polygon(0 35%, 35% 35%, 35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%);
clip-path: polygon(0 37%, 35% 36%, 35% 0, 65% 0, 65% 36%, 100% 36%, 100% 63%, 65% 63%, 65% 100%, 36% 100%, 36% 64%, 0 64%);
}
#top_arrow {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
height: 6px;
width: 10px;
background-color: #636663;
position: relative;
top: 3px;
left: 30px;
}
#right_arrow {
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
height: 10px;
width: 6px;
background-color: #636663;
position: relative;
top: 23px;
left: 60px;
}
#bottom_arrow {
-webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
clip-path: polygon(0 0, 50% 100%, 100% 0);
height: 6px;
width: 10px;
background-color: #636663;
position: relative;
top: 44px;
left: 30px;
}
#left_arrow {
-webkit-clip-path: polygon(0 50%, 100% 100%, 100% 0);
clip-path: polygon(0 50%, 100% 100%, 100% 0);
height: 10px;
width: 6px;
background-color: #636663;
position: relative;
top: 8.5px;
left: 4px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div>
<div id="zoom_polygon" style="height:70px;width:70px;">
<div id="panning_container">
<div id="top_arrow"></div>
<div id="right_arrow"></div>
<div id="bottom_arrow"></div>
<div id="left_arrow"></div>
<div id="parent_pan" style="background-color:none;height:40px;width:40px;position:relative;top:-17px;left:15px;">
<div id="pan_circle" style="width:18px;height:18px;background-color:#636663;border-radius:9px;position:relative;top:10.3px;left:11.3px;"></div>
</div>
</div>
</div>
<div class="zoom_range">
<span class="plus_zoom" id="plus_zoom">+</span>
<hr class="zoom_hr1" />
<input type="range" name="zoom" value="100" max="1000" min="1" orient="vertical" class="zoom_slider" id="zoom_slider" />
<hr class="zoom_hr2" />
<span class="minus_zoom" id="minus_zoom">-</span>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
我希望它在所有浏览器中都能正常工作,请任何人帮助解决它或建议我一个类似的答案。
解决方案
这里的问题是 Chrome 不支持orient="vertical"
html 属性(link),因此您使用transform: rotate(-90deg);
css 属性使滑块显示为垂直。
但是,由于 Firefox 支持垂直方向,transform 属性将滑块旋转回水平方向,并且滑块的高度和宽度属性会互换。在 Firefox 中,您实际上看到的是一个宽度为 2px(因此无法移动滑块)和高度为 184px 的水平滑块;
您可以orient="vertical"
从范围输入中删除 html 属性,并在相应的 css 规则中进行必要的修改。小提琴(在 Chrome 和 Firefox 中检查)。
或者,您可以使用-webkit-appearance: slider-vertical;
chrome 的 css 属性使滑块显示为垂直,同时使用orient="vertical"
Firefox 的 HTML5 属性。
注意:我还没有在 IE 中测试过代码。我会在这里发布更新。
推荐阅读
- javascript - 如何获取数组中对象的数量?猫鼬
- bash - 未找到使用 sudo 返回命令的 bash 别名
- javascript - 为什么在 Reactjs 中 render 不会擦除孩子的状态?
- excel - 如何按索引遍历访问字段名称?
- reactjs - 使用 renderRichText - 收到错误节点未定义
- vba - MSAccess VBA - 仅循环通过用户选择的记录
- python - 为什么 Flask Server 在运行电机后需要重新启动?
- python - 使用 Pushes Create Api with Python 将文件上传/推送到 Azure Devops Repo 时如何找到 oldobjectid
- python - 如何通过 docker-compose 将 Makefile 中的变量传递给 Python 脚本
- docker - NPM 无法找到 package.json - Docker-Compose 上的 VueJS