边距在软边缘Vs中呈现的方式有所不同。 Chrome / Safari

Question

我有一个布局（下面的代码），可以按照Chrome和Safari的要求进行渲染，但是不幸的是，Microsoft Edge和Internet Explorer在元素和导航栏之间渲染了一个黑条。 我该怎么做才能阻止这种情况发生？

看这里 -

铬：

边缘：

<div class="navbar navbar-inverse" role="navigation" id="slide-nav">
  <div class="container" id="logoStripe">
     <!-- Links -->
  </div>
</div>
<div id="page-content">
  <div class="container-fluid adjustedHeight Page1B">
    <div class="video-container">
      <video autoplay loop id="video">
        <source src="Images/Medium.mp4" type="video/mp4" />
        Your browser does not support the video tag. I suggest you upgrade your browser.</video>
    </div>
  </div>

CSS：

.nav-bar{
    height:77px;
}
.adjustedHeight {
    height: calc(100vh - 77px);
    width: 100%;
    margin-top: -100px;
    padding: 0;
}
video {
    height: 100%;
    width: 100%;
    object-fit : cover;
}
.video-container {
    overflow: hidden;
    display: block !important;
    position: relative;
}
.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
}

Answer 1

这里的一个问题是Page1规则的margin-top: 30%; 。

当您将percent用作margin-top ，它将使用父级宽度来计算margin值，因此，只要简单地调整浏览器窗口的大小，此不必要的间隙就会增加/减小。

更新

我制作了2个样本， 为您更新了小提琴，并显示了一个非常简单的样本片段，显示了另一种选择。

关于小提琴，请检查问题是否消失。 我所做的只是从其元素中删除Page1类，并删除了<div id="page-content">元素。

示例代码段

 html, body { height: 100%; margin: 0; } .container { height: 100%; padding-top: 80px; box-sizing: border-box; } .navbar { position: fixed; height: 80px; top: 0; left: 0; width: 100%; background: #bbb; } .content { height: 100%; } video { display: block; height: 100%; width: 100%; object-fit : contain; } 

 <div class="container"> <div class="navbar"> </div> <div class="content"> <video autoplay loop mob-hide id="video"> <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4" /> Your browser does not support the video tag. I suggest you upgrade your browser. </video> </div> </div>