html - iFrame border-radius 显示视觉间隙

Question

在 iFrame 的父 div 上添加 border-radius 时，边框并不完全适合 iFrame，即使它们被分配了相同的宽度和高度值。

我在下面生成的图像中添加了指向视觉间隙的箭头。屏幕截图来自最新版本的 Chrome(2016 年 3 月)。

---

HTML 代码:

<div class="mapFrame">
    <iFrame class="googleMap" src="http://maps.google.co.uk/maps?q=sanfrancisco&amp;output=embed" width="500" height="400"></iFrame>
</div>

CSS 代码:

.mapFrame
{
    border-style: solid;
    border-width: 6px;
    border-color: #ffffff;
    box-shadow: 0px 0px 20px #000000;
    margin: auto;
    border-radius: 80px;
    overflow: hidden;
    width: 500px;
    height; 400px;
    position: relative;
}

结果:

Answer 1

您是否尝试过 .mapFrame iframe {border: none}？从我的电脑(也是最新的 chrome)来看，它似乎是默认的 iframe 边框。您还可以考虑制作 iframe display:block，因为内联元素的行高和字母间距往往会影响像素精确呈现。