Pourquoi les éléments html s'affichent différemment dans IE, Firefox et Chrome?

Question

J'ai un ensemble de contrôles personnalisés pour ma vidéo sur une page html. Il s'affiche plus ou moins comme je le souhaite dans Chrome, mais quand je le regarde dans Edge ou Firefox, les choses s'affichent trop haut, pas assez haut, dans des endroits complètement faux. J'ai passé la partie du week-end en essayant de comprendre cela et je n'ai eu aucune chance. Voici une image de ce qu'ils ressemblent:

Voici mon code actuel:

<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> 

Et voici mon 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; 
} 

J'espère vraiment que quelqu'un peut aidez-moi à comprendre pourquoi ils s'affichent différemment dans divers navigateurs. Merci.

Answer 1

Ceci est probablement dû au fait que les navigateurs ont des styles par défaut légèrement différents.

Une solution assez simple est d'inclure Reset dans votre projet, qui vise à éliminer tout style spécifique au navigateur et vous laisser avec une feuille blanche pour travailler avec.

Si cela ne résout pas le problème, en fonction de la distance à laquelle vous voulez retourner votre browser compatibility, je vous recommande d'utiliser Flexbox. FlexBox gère les mises en page comme celle que vous essayez de réaliser avec brio, ce qui le rend fantastique à utiliser sur tous les projets qui ne nécessitent pas beaucoup de rétrocompatibilité.

Answer 2

Blâmez les modèles de boîte de bordure utilisés par chacun des cadres et des styles spécifiques au navigateur. S'ils étaient d'accord sur un ensemble de spécifications, nous n'aurions pas à lutter contre le cauchemar de la compatibilité croisée.