Iframe在

之下創建額外空間

爲什麼iframe在其元素下添加額外空間？看看這個怪異的行爲：Iframe在

.border { 
 
    background: red; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid green; 
 
    overflow: visible; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.border iframe { 
 
    border: none; 
 
    width: 300px; 
 
    height: 100px; 
 
    margin: 0; 
 
    padding: 0; 
 
    opacity: 0.8; 
 
} 
 

 
.border .lower { 
 
    height: 100px; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: blue; 
 
    opacity: 0.8; 
 
}

<div class="border"> 
 
    <iframe src="https://example.com"></iframe> 
 
    <div class="lower"></div> 
 
</div>

如何解決？

來源

2014-01-09 katspaugh

添加display:block;到iframe風格像這樣：

.border iframe { 
    border: none; 
    width: 300px; 
    height: 100px; 
    margin: 0; 
    padding: 0; 
    opacity: 0.8; 
    display:block; /* Add this */ 
}

的iFrame是一種嵌入式框架，這意味着它是一個內聯元素，比如img標籤，可以有問題有空白。在它上面設置display:block;將iFrame變成一個塊元素（如div），這將刪除空白問題。

來源

2014-01-09 16:10:19 wickywills

iframe是一個內聯元素。這將考慮到HTML中的空白。 display:inline-block因難度大而臭名昭着。

將display:block;添加到您的iframe的CSS中。

來源

2014-01-09 16:12:57 tomsullivan1989

-2

這裏是另一個答案，請檢查一下......

.border iframe { 
border: none; 
width: 300px; 
height: 100%; 
margin: 0; 
padding: 0; 
opacity: 0.8; 
}

來源

2014-01-09 16:19:42

啊....高度可能是100％..then解決... – 2014-01-09 16:20:32

沒錯這就是工作.. :) – 2014-01-17 10:23:10

好嗎bro..thaks –

-1

的iframe元素是內嵌元素。解決間距問題的一種方法是添加display: block，但您也可以通過將vertical-align: bottom;簡單添加到iframe元素來解決此問題。

來源

2016-10-08 02:52:15 jarodtaylor

我的應用程序的工作原理是將overflow-y: hidden;添加到iframe的html中。

來源

2017-04-18 17:48:13 thouliha

最簡單的方法是在iframe參數中添加「style =」display：block「」。

例如

<iframe width="100%" height="100%" frameborder="0" style="display:block" 
    src="https://www.url.com"></iframe>

來源

2017-05-12 21:21:05

回答

相關問題