[英]Why do html items display differently in IE and Firefox and Chrome?
I have a custom set of controls for my video on a html page. 我在html页面上为我的视频设置了一组自定义控件。 It display more or less the way I want it to in Chrome but when i look at it in Edge or Firefox things are displaying too high up, not high enough, in complete wrong places. 它或多或少地显示我想要它在Chrome中的方式但是当我在Edge或Firefox中查看它时,在完全错误的地方显示的东西太高,不够高。 I have spent the batter part of a weekend trying to figure this out and I've had zero luck. 我花了一个周末的击球手试图解决这个问题,我没有运气。 Here is an image of what they look like: 这是他们看起来像的图像:
Here is my current code: 这是我目前的代码:
<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>
And here is my CSS: 这是我的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;
}
I really hope someone can help me figure out why they display differently in various browsers. 我真的希望有人可以帮我弄清楚为什么它们在各种浏览器中的显示方式不同。 Thanks. 谢谢。
This is probably down to the fact browsers have slightly different default styles. 这可能是因为浏览器的默认样式略有不同。
A pretty simple solution is to include Reset in your project, which aims to eliminate any browser-specific styling and leave you with a clean sheet to work with. 一个非常简单的解决方案是在项目中包含重置 ,旨在消除任何特定于浏览器的样式,并为您提供一个干净的工作表。
If that doesn't fix the problem, depending on how far back you want your browser compatibility to go, I would recommend using Flexbox. 如果这不能解决问题,取决于您希望浏览器兼容性有多远,我建议使用Flexbox。
Flexbox handles layouts like the one you're trying to make brilliantly, making it fantastic to use on any projects that don't need a lot of backwards compatibility. Flexbox处理的布局就像你试图制作的布局一样出色,使得在任何不需要大量向后兼容性的项目中使用它非常棒。
Blame the border box models used by each of the frameworks and browser specific styles. 归咎于每个框架和浏览器特定样式使用的边框框模型。 If they'd actually agree on a set of specifications, we wouldn't have to fight the nightmare of cross browser compatibility. 如果他们真的同意一套规范,我们就不必打击跨浏览器兼容性的噩梦。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.