Почему объекты html отображаются по-разному в IE, Firefox и Chrome?

Question

У меня есть пользовательский набор элементов управления для моего видео на странице html. Он отображает более или менее то, что я хочу в Chrome, но когда я смотрю на него в Edge или Firefox, вещи отображаются слишком высоко, недостаточно высоко, в совершенно неправильных местах. Я потратил часть теста на выходные, пытаясь понять это, и мне не повезло. Вот изображение того, что они выглядят как:

Вот мой текущий код:

<div id ="video-container"> 
        <video class = "jack7" width="450" height="230" id = "video"> 
        <source src="<?php echo($videourl); ?>" type="video/mp4"> 
        Your browser does not support this video. Try chrome! 
        </video> 
        <div id="video-controls"> 
        <button type="button" id="play-pause" ><img id = "playbtn" src="img/icons/play.png"></button> 
        <input type="range" id="seek-bar" step="0.01" value="0"> 
        <button type="button" id="mute"><img id = "mutebtn" src="img/icons/unmute.png"></button> 
        <input type="range" id="volume-bar" min="0" max="1" step="0.01" value="1"> 
        <button type="button" id="full-screen"><img id = "fsbtn" src="img/icons/fullscreen.png"></button> 
        </div> 

       </div> 

А вот мой CSS:

.jack7{ 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 
#video-container { 
    margin-left: 234px; 
    margin-top: -150px; 
    margin-bottom: 30px; 
    width: 450px; 
    height: 230px; 
    position: relative; 
    background-color: #000000; 
} 

#video-controls { 
    background: linear-gradient(rgba(255,255,255,0),#222222); 
    position: relative; 
    margin-top: -31px; 
    opacity:0; 
    padding: 5px; 
    -webkit-transition: opacity .3s; 
    -moz-transition: opacity .3s; 
    -o-transition: opacity .3s; 
    -ms-transition: opacity .3s; 
    transition: opacity .3s; 


} 

#video-container:hover #video-controls { 
    opacity:.9; 
} 

button { 
    outline:none; 
    background: none; 
    border:0; 
    font: inherit; 
    line-height: normal; 
    overflow: visible; 
    padding: 0; 
    -webkit-appearance: button; /* for input */ 
    -webkit-user-select: none; /* for button */ 
     -moz-user-select: none; 
     -ms-user-select: none; 

} 

button:hover { 
    cursor: pointer; 
} 

#seek-bar { 
    outline:none; 
    width: 295px; 
    -webkit-appearance:none; 
    background:transparent; 

} 
#seek-bar::-webkit-slider-thumb{ 
-webkit-appearance:none; 
} 
#seek-bar::-webkit-slider-thumb{ 

    width:7; 
    height:5; 
    background:#FF6000; 
    outline:none; 
    cursor:pointer; 
} 
#seek-bar::-moz-range-thumb{ 
    -webkit-appearance:none; 
    width:7; 
    height:5; 
    background:#FF6000; 
    outline:none; 
    cursor:pointer; 
} 
#seek-bar::-ms-thumb{ 
    -webkit-appearance:none; 
    width:7; 
    height:5; 
    background:#FF6000; 
    outline:none; 
    cursor:pointer; 
} 
#seek-bar::-webkit-slider-runnable-track{ 
    cursor:pointer; 
    height:5; 
    background:#8C8C8C; 

} 
#seek-bar::-moz-range-track{ 
    cursor:pointer; 
    height:5; 

    background:#8C8C8C; 
} 
#seek-bar::-ms-track{ 
    cursor:pointer; 
    height:5; 
    background:#8C8C8C; 
} 
#seek-bar::-ms-fill-lower{ 
    background:#FF9B2F; 
    height:5; 
} 
#seek-bar::-ms-fill-upper{ 
    background:#8C8C8C; 
    height:5; 
} 


#volume-bar { 
    outline:none; 
    width: 60; 
    -webkit-appearance:none; 
    background:transparent; 

} 
#volume-bar::-webkit-slider-thumb{ 
-webkit-appearance:none; 
} 
#volume-bar::-webkit-slider-thumb{ 

    width:7; 
    height:5; 
    background:#FF6000; 
    outline:none; 
    cursor:pointer; 
} 
#volume-bar::-moz-range-thumb{ 
    -webkit-appearance:none; 
    width:7; 
    height:5; 
    background:#FF6000; 
    outline:none; 
    cursor:pointer; 
} 
#volume-bar::-ms-thumb{ 
    -webkit-appearance:none; 
    width:7; 
    height:5; 
    background:#FF6000; 
    outline:none; 
    cursor:pointer; 
} 
#volume-bar::-webkit-slider-runnable-track{ 
    cursor:pointer; 
    height:5; 
    background:#8C8C8C; 

} 
#volume-bar::-moz-range-track{ 
    cursor:pointer; 
    height:5; 
    background:#8C8C8C; 
} 
#volume-bar::-ms-track{ 
    cursor:pointer; 
    height:5; 
    background:#8C8C8C; 
} 
#volume-bar::-ms-fill-lower{ 
    background:#FF9B2F; 
    height:5; 
} 
#volume-bar::-ms-fill-upper{ 
    background:#8C8C8C; 
    height:5; 
} 

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

Answer 1

Возможно, это связано с тем, что браузеры имеют несколько разные стили по умолчанию.

Довольно простое решение состоит в том, чтобы включить в проект проект Reset, целью которого является устранение любого стиля, характерного для браузера, и предоставление вам чистого листа для работы.

Если это не исправить проблему, в зависимости от того, как далеко назад вы хотите, чтобы ваш browser compatibility ушел, я бы рекомендовал использовать Flexbox.

Flexbox обрабатывает макеты, подобные тому, который вы пытаетесь сделать блестяще, что делает его фантастическим для использования в любых проектах, для которых не требуется много обратной совместимости.

Answer 2

Поражайте модели рамки, используемые каждой из фреймворков и конкретных стилей браузера. Если бы они действительно согласились с набором спецификаций, нам не пришлось бы бороться с кошмаром кросс-браузерной совместимости.