保證金在m'軟邊與Vs. Chrome/Safari

我有一個佈局（代碼如下），它可以在Chrome和Safari中按照預期呈現，但不幸的是，Microsoft Edge和Internet Explorer在元素和我的導航欄之間呈現黑色條。我能做些什麼來阻止這種情況的發生？保證金在m'軟邊與Vs. Chrome/Safari

看到這裏 -

鉻：

邊緣：

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

來源

2016-02-18 George Edwards

請創建工作演示，再現的問題。 – LGSon

@LGSon但是，我不能真正顯示問題，因爲您需要使用IE或邊緣，但是，[這裏]（https://jsfiddle.net/qkembuth/）是創建probem的完整代碼的JSFiddle。 –

我正在瀏覽我的一些舊的答案，並發現下面。我的更新回答沒有幫助你？ – LGSon

的一個問題是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; 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t 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>

來源

2016-02-18 18:20:19 LGSon

感謝您的支持。我擔心改成「最高：30％;」並不能改變問題。 –

@GeorgeEdwards解釋你想如何看起來像，我可能會建議一些其他方式來實現你想要的。你能否確認，比你刪除margin-top時，IE和Chrome都呈現相同的效果？ – LGSon

我想要一個全寬度的全高度視頻，觸摸導航欄底部和屏幕底部（不再進一步），保持縱橫比，溢出隱藏。 –

保證金在m'軟邊與Vs. Chrome/Safari

回答

相關問題