图像裁剪父元素的边框半径？（苹果浏览器）答案

【问题标题】：Image Clipping Parent Element's Border-Radius? (Safari)图像裁剪父元素的边框半径？（苹果浏览器）
【发布时间】：2018-07-30 05:29:41
【问题描述】：

是什么导致图像剪切父元素的border-radius？图像和父元素都应用了border-radius: 50%，但它仍然会导致剪辑发生。

这是我在 Safari 中面临的问题：

据我所知，这似乎是 Safari 特有的问题。有什么意见吗？

body {
  margin: 0;
  padding: 0;
  border: 0;
}

#photo-container {
  box-sizing: border-box;
  padding: 40px 25% 20px;
  line-height: 0;
  margin: 0;
}

#photo-container a {
  border: 2px solid blue;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  padding: 5px;
  display: block;
  box-sizing: border-box;
}

img#photo {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border: 0;
  padding: 0;
}

<div id="photo-container">
  <a id="#">
    <img id="photo" src="http://freedesignfile.com/upload/2018/02/most-beautiful-scenery-of-nature-Stock-Photo-04.jpg">
  </a>
</div>

【问题讨论】：

如果您尝试创建一个空的 DIV 并将图像设置为背景，然后查看该 div 上的边框半径是否会产生相同的问题。
试过你的建议，没有成功。我觉得应该有一个简单的解决方案，但也许这是 Safari 中的一个错误？
不确定您所说的“没有成功”是什么意思。这看起来不像 Safari 中带有圆圈的图像吗？ jsfiddle.net/jsbd8zd7
@Alexus，感谢您的反馈，尽管我在这里找到了解决方案：stackoverflow.com/a/48877520/9214076。

标签： html css border clipping

【解决方案1】：

找到了解决办法。将-webkit-backface-visibility: hidden; 和-moz-backface-visibility: hidden; 应用于img#photo 解决了边框剪裁问题。

img#photo {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border: 0;
  padding: 0;
}

【讨论】：

【解决方案2】：

最初加载页面时，它会显示轻微的重叠错误，直到页面完全加载，然后它在我的 safari 中正确加载。

如果您仍然遇到问题，我可以提出的唯一建议是将box-sizing: border-box; 也添加到#photo-container a。

至于为什么会发生，这就是为什么：

Safari 似乎无法正确裁剪图像。因此，即使图像不可见，容器的边框也会被图像覆盖。我测试了几个不同的东西，比如缩小图像的大小等，并且在多个阶段都遇到了类似的问题，所以这不太可能是你可以 100% 解释的问题。

【讨论】：

感谢您的意见，但即使将box-sizing: border-box 应用于#photo-container a，问题仍然存在。
那么，这会被认为是浏览器显示错误吗？