边距在 m'soft edge Vs 中呈现不同。铬/ 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%;。

当您对margin-top 使用百分比时，它使用父级宽度来计算边距值，因此只需调整浏览器窗口的大小，这个不需要的间隙就会增加/减少。

更新

我制作了 2 个示例，一个 update of you fiddle 和一个非常简单的示例 sn-p，显示了另一种选择。

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

示例 sn-p

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>