刪除額外的空白周圍iframe？

我在頁面中使用iframe，並且偶然發現了一個奇怪的問題。我設置了iframe的CSS像這樣刪除額外的空白周圍iframe？

iframe { 
    margin: none; 
    padding: none; 
    background: blue; /* this is just to make the frames easier to see */ 
    border: none; 
}

然而，仍有周圍的iframe空白。我在Chrome和Firefox上測試過它，它也是一樣的。我四處搜尋，找不到任何東西。 Chrome空間不會顯示該空白。另外，我已經有了下面的CSS以及：

html, body { 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    width: 100%; 
    height: 100%; 
}

的jsfiddle：here

來源

2011-07-18 Colin Atkinson

[測試]（http://jsfiddle.net固定它/ u82Qh /），IE和FF（在我的結尾）不能看到邊框。這也可能是它在容器中。（我知道我設置大小，但我的預期是，一個iframe的利潤率將擴大其母公司，以適應 - 沒有這樣的結果。） –

@BradChristie我應該怎麼辦呢？iframe只是在我的身體標記。 –

你可以讓一個jsfiddle完全複製你所擁有的？（將整個HTML源代碼放在左上角的窗口中，然後點擊保存並提供該鏈接。） –

剛剛看到你的小提琴你的問題是因爲你使用display:inline-block。這將考慮到html中的空白。 display:inline-block由於難以瀏覽器支持而臭名昭着。

選項1： 嘗試刪除在HTML的白色空間有時可以排序的問題。

選項2： 使用不同的顯示屬性，如display:block將肯定排序問題。活生生的例子：使用一個div http://jsfiddle.net/mM6AB/3/

來源

2011-07-18 15:30:07 tw16

已經嘗試過，結果相同。 –

你嘗試過'display：block'嗎？因爲這應該可以解決問題。 – tw16

是的，它也適用於我的Chrome！我不知道這是爲什麼起作用，但確實如此！你可以把它作爲答案，所以我可以把它標記爲正確的？我也必須刪除DOCTYPE，但沒關係。 –

嘗試html, body {margin:0px;}

來源

2011-07-18 15:09:03

我已經有了。 –

有點難沒有你的HTML內容來解決，但試試這個：

iframe { 
    margin: 0px !important; 
    padding: 0px !important; 
    background: blue; /* this is just to make the frames easier to see */ 
    border: 0px !important; 
} 

html, body { 
    margin: 0px !important; 
    padding: 0px !important; 
    border: 0px !important; 
    width: 100%; 
    height: 100%; 
}

添加!important會強制樣式，因爲我的猜測是您的樣式覆蓋了ea其他。

來源

2011-07-18 15:24:25

嘗試overflow: hidden;周邊，像

<div style="height: 29px; overflow: hidden;"> 
    <iframe frameborder=0 allowtransparency=yes scrolling=no src="../hng_frames/copyright_part.html" width="980" height="30"> 
     <p>Your browser does not support iframes.</p> 
    </iframe> 
</div>

來源

2012-02-04 12:56:21 dipankar

前段時間我關閉了這個問題。另外，爲什麼遠程幫助？ –

他說的是，當你有一個專門設置爲300px的iFrame，但瀏覽器使用4px邊框進行渲染時，可以將父div設置爲300px，並且現在不可能顯示邊框在iFrame上。 –

在我的情況下，它確實有幫助，但我不確定爲什麼 – yitwail

也許這空白實際上是在加載文檔的外邊距。試造型的加載文件（CSS樣式的源頁面）有：

html, body { 
    border: 0px; 
    margin: 0px; 
    padding: 0px; 
}

當您使用的是內聯元素從stackoverflow.com Here

來源

2012-09-18 01:17:19 Tooma

報價，空格可能是從「行」該元素是（即基線下方的空間）的一部分。解決方案然後將其添加到其父元素。

line-height: 0;

來源

2013-04-17 14:39:06

+1解釋空間來自哪裏 – xr280xr

只有一個工作！對我來說FFv42。 –

iframe { display:block; }

iframe是一個內聯元件

來源

2013-06-02 01:20:50

我有同樣的問題，我通過浮動框架元件

iframe { 

    margin: none; 
    padding: none; 
    border: none; 
    line-height: 0; 
    float: left; 
}

來源

2016-03-10 17:53:13

如果你解釋了你改變了什麼以及它爲什麼會起作用，這將會很有幫助。 –

這就是爲什麼可以添加舊的問題：添加float：left的解釋; –

刪除額外的空白周圍iframe？

回答

相關問題