Html Margin在m'中的呈现方式不同；软边Vs.铬/Safari

我有一个布局（下面的代码），它按照Chrome和Safari中的预期渲染，但不幸的是，Microsoft Edge和Internet Explorer在元素和导航栏之间渲染了一个黑色条。我能做些什么来阻止这种情况发生

看这里-

铬：

边缘：

---

这里的一个问题是

Page1

规则有

页边距顶部：30%

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

更新

我制作了两个示例，一个示例和一个非常简单的示例片段，其中显示了另一个示例

关于小提琴，请检查问题是否已解决。我所做的只是从元素中删除了
Page1
类，并删除了
元素

示例代码段


html，正文{
身高：100%；
保证金：0；
}
.集装箱{
身高：100%；
填充顶部：80px；
框大小：边框框；
}
navbar先生{
位置：固定；
高度：80px；
排名：0；
左：0；
宽度：100%；
背景:#bbb ;；
}
.内容{
身高：100%；
}
录像带{
显示：块；
身高：100%；
宽度：100%；
对象匹配：包含；
}

您的浏览器不支持视频标记。
我建议你升级你的浏览器。
这里的一个问题是
Page1
规则有
页边距顶部：30%

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

更新

我制作了两个示例，一个示例和一个非常简单的示例片段，其中显示了另一个示例

关于小提琴，请检查问题是否已解决。我所做的只是从元素中删除了
Page1
类，并删除了
元素

示例代码段


html，正文{
身高：100%；
保证金：0；
}
.集装箱{
身高：100%；
填充顶部：80px；
框大小：边框框；
}
navbar先生{
位置：固定；
高度：80px；
排名：0；
左：0；
宽度：100%；
背景:#bbb ;；
}
.内容{
身高：100%；
}
录像带{
显示：块；
身高：100%；
宽度：100%；
对象匹配：包含；
}

您的浏览器不支持视频标记。
我建议你升级你的浏览器。
请创建一个工作演示，以再现问题。@LGSon我不能真正显示问题，因为您需要使用IE或edge，但是，它是创建问题的完整代码的一部分。我正在浏览我的一些旧答案，并找到以下内容。我更新的答案没有帮到你吗？请创建一个工作的演示，重现这个问题。@LGSon我不能真正显示问题，因为你需要使用IE或edge，但是，它是创建问题的完整代码的一部分。我正在浏览我的一些旧答案，并找到以下内容。我的最新答案没有帮到你吗？谢谢你。恐怕换成
top:30%并不能改变问题。@GeorgeEdwards解释您希望它看起来是什么样子，我可能可以建议其他方法来实现您的目标。你能确认一下吗，当你移除页边空白顶部时，IE和Chrome都呈现相同的效果吗？我想要一个全宽全高视频，触摸导航栏的底部和屏幕的底部（不再）保持高宽比，溢出隐藏。如果我移除page1 css，那么它仍然会在边缘呈现一个黑条，但Chrome中没有黑条。唯一不同的是，按钮射向顶部。@GeorgeEdwards好的，我稍后会回来给你一个你可以做的示例。谢谢你。恐怕换成
top:30%并不能改变问题。@GeorgeEdwards解释您希望它看起来是什么样子，我可能可以建议其他方法来实现您的目标。你能确认一下吗，当你移除页边空白顶部时，IE和Chrome都呈现相同的效果吗？我想要一个全宽全高视频，触摸导航栏的底部和屏幕的底部（不再）保持高宽比，溢出隐藏。如果我移除page1 css，那么它仍然会在边缘呈现一个黑条，但Chrome中没有黑条。唯一的区别是按钮射向顶部。@GeorgeEdwards好的，我稍后会回来给你一个你可以做的示例。
<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>

.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;
}