javascript - 为什么 CSS 在 mozilla firefox 和 internet explorer 中不能正常工作？

Question

我正在使用 html css 和 javascript 设计缩放控件，但它无法在所有浏览器中正常工作。

我正在使用 css 将范围输入作为缩放 slider 并将 div 作为 joystiq 导航控件，它在谷歌浏览器中工作正常，但在 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>

我希望它在所有浏览器中都能正常工作，请任何人帮助解决它或建议我一个类似的答案。

Answer 1

这里的问题是 Chrome 不支持 orient="vertical" html 属性 ( link ) 因此你正在使用 transform: rotate(-90deg ); 使 slider 显示为垂直的 css 属性。

但是，由于 Firefox 支持垂直方向，transform 属性会将 slider 旋转回水平方向，并且 slider 的高度和宽度属性会互换。在 Firefox 中，您实际上看到了一个宽度为 2px(因此无法移动 slider )和高度为 184px 的水平 slider ；

您可以从范围输入中删除 orient="vertical" html 属性，并在相应的 css 规则中进行必要的修改。 Fiddle (在 Chrome 和 Firefox 中检查)。

或者，您可以使用 -webkit-appearance: slider-vertical; chrome 的 css 属性使 slider 显示为垂直，同时使用 HTML5 属性 orient="vertical" 用于 Firefox。

注意:我还没有在 IE 中测试代码。我会在这里发布更新。