鉻溢出iframe背景之外的div？

我有一個iframe內的div標籤與溢出：隱藏和50px的邊界半徑四周使它成爲一個圓圈。 iframe源代碼是一個帶按鈕的.aspx頁面。點擊按鈕後會導致回發。在回貼後，我將它從無到有改變爲背景色。鉻溢出iframe背景之外的div？

iframeBody.Attributes.Add("Style", "background-color:#FF9090");

它完美的Firefox和Internet Explorer（精細的IE！？令人驚訝！），但在Chrome似乎要溢出的背景色形成一個正方形。（所有其他內容完美顯示，只是背景滲出。）任何幫助，將不勝感激。謝謝。

來源

2011-11-28 Ber53rker

[這是你想要實現的嗎？]（http://jsfiddle.net/tX3Xc/）因爲這在Chrome中適用於我。你的項目有什麼不同？ –

感謝您的回覆。我能夠使用該網站重新創建問題：http://jsfiddle.net/tX3Xc/3/ – Ber53rker

您在示例中看到的正方形是iframe邊框。您可以輕鬆地刪除與風格：

iframe { 
    border: 0; 
}

iframe的內容顯然溢出包含div，當div有position: absolute（或relative，對於這個問題）。我不明白爲什麼會是這樣，但你總是可以解決，通過包裹在只包含div和iframe的容器該專區，並移動定位到該元素：

<div id="outer"> 
    <div> 
     <iframe></iframe> 
    </div> 
</div> 

#outer { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
} 

#outer > div { 
    border-radius: 50px; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
    border: 5px solid #D3D3D3; 
} 

iframe { 
    border: 0; 
    background-color: pink; 
    height: 100%; 
    overflow: hidden; 
    width: 100%; 
}

考慮到這一點後，您會注意到iframe與邊框的一部分重疊。如果您只是刪除position: absolute，這與您在Chrome中看到的行爲相同。

然而，現在你確實有一個包裝，它也是一個小的修復，也將邊框移動到該包裝，這也將照顧到這個問題，並給你一個很好的圓形邊框，這將看起來在所有現代瀏覽器中都是一樣的。要繼續都的div的border-radius財產，但border財產轉移到#outer

注意。現在，由於包裝具有邊框，它的孩子沒有，包裝會稍微大一些，所以順利的圓圈，所以還需要一個稍大的邊界半徑：

#outer { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    border: 5px solid #D3D3D3; 
    border-radius: 55px; 
} 

#outer > div { 
    border-radius: 50px; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
} 

iframe { 
    border: 0; 
    background-color: pink; 
    height: 100%; 
    overflow: hidden; 
    width: 100%; 
}

Working demo

來源

2011-11-28 20:53:04

我甚至不知道有一個默認邊框。（使用樣式表重置值。）但是，它並沒有幫助背景顏色：http://jsfiddle.net/tX3Xc/4/ – Ber53rker

這顯然是一個'位置：絕對'問題。不能完全告訴你爲什麼，但刪除它可以解決問題。不是說結果是一個完美的圓圈，雖然... –

不幸的是，這並沒有幫助我，因爲我需要它的定位。不過謝謝。 – Ber53rker

還有另一種方法。您可以使用webkit-mask-image並製作一張透明的PNG圖像作爲蒙版（當然也適用於漸變或更復雜的形狀）。目前只適用於webkit瀏覽器（Safari/Chrome等），但相當於略低於50％的人。取決於觀衆可能是一個選擇。

來源

2013-01-04 17:31:00

鉻溢出iframe背景之外的div？

回答

相關問題