铬溢出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？

回答

相关问题