边距在m＆lt;软边缘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%;。

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

的更新 的

我制作了2个样本，update of you fiddle和一个非常简单的示例代码段，显示了替代方案。

关于小提琴，请检查问题是否消失。我所做的只是从其元素中删除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>