IE、Firefox、Chromeでhtml項目が異なるのはなぜですか？

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

各フレームワークとブラウザ固有のスタイルで使用されている枠の枠のモデルを非難します。彼らが実際に一連の仕様に同意すれば、ブラウザ間の互換性の悪夢と戦う必要はありません。