為什么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

這可能是因為瀏覽器的默認樣式略有不同。

一個非常簡單的解決方案是在項目中包含重置 ，旨在消除任何特定於瀏覽器的樣式，並為您提供一個干凈的工作表。

如果這不能解決問題，取決於您希望瀏覽器兼容性有多遠，我建議使用Flexbox。

Flexbox處理的布局就像你試圖制作的布局一樣出色，使得在任何不需要大量向后兼容性的項目中使用它非常棒。

Answer 2

歸咎於每個框架和瀏覽器特定樣式使用的邊框框模型。 如果他們真的同意一套規范，我們就不必打擊跨瀏覽器兼容性的噩夢。