Почему CSS не работает должным образом в Mozilla Firefox и Internet Explorer? - PullRequest
Новая
       22

Почему CSS не работает должным образом в Mozilla Firefox и Internet Explorer?

0 голосов
/ 15 февраля 2019

Я разрабатываю элемент управления масштабированием с использованием 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>

enter image description here

Я хочу, чтобы он работал корректно во всех браузерах, пожалуйста, всепомогите решить или предложите мне аналогичный ответ.

1 Ответ

0 голосов
/ 15 февраля 2019

Проблема в том, что Chrome не поддерживает атрибут orient="vertical" html ( link ), и поэтому по этой причине вы используете свойство transform: rotate(-90deg); css, чтобы сделать слайдер вертикальным.

Однако, поскольку Firefox поддерживает вертикальную ориентацию, свойство transform поворачивает ползунок обратно в горизонтальное положение, и свойства ползунка по высоте и ширине меняются местами.В Firefox вы фактически видите горизонтальный ползунок шириной 2 пикселя (и, следовательно, не можете переместить ползунок) и высотой 184 пикселя;

Вы можете удалить атрибут orient="vertical" html из ввода диапазона и внести необходимые изменения всоответствующие правила CSS. Fiddle (отметьте как в Chrome, так и в Firefox).

Или вы можете использовать свойство -webkit-appearance: slider-vertical; css для chrome, чтобы сделать слайдер вертикальным, а атрибут HTML5 orient="vertical" дляfirefox.

ПРИМЕЧАНИЕ. Я до сих пор не проверял код в IE.Я опубликую обновление здесь.

...