<img> 在移动 safari 上被剪裁了 1px答案

【问题标题】：<img> was clipped by 1px on mobile safari<img> 在移动 safari 上被剪裁了 1px
【发布时间】：2017-10-06 01:07:29
【问题描述】：

无论是否缩放，图像顶部都被裁剪了 1px。当手机处于水平模式时，它会恢复正常。

代码：

img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

&lt;img src="http://www.duoziwang.com/uploads/1602/1-160221222J70-L.jpg" alt=""&gt;

有时剪辑发生在底部，在缩放时。

看起来像这样：

safari 图片边框半径错误

设备信息：iOS 10.3.1 iPhone 6 在我的 iPhone 7 上无法重现

【问题讨论】：

怎么样，而不是直接对 img 元素进行边界半径，而是对包装器执行此操作。像这样jsfiddle.net/yknok9nz/1
Are Safari & Mobile Safari rendering rounded borders with radius and padding incorrectly?的可能重复
以上两个 cmets 都没有解决我的问题。剪辑仍然存在。

【解决方案1】：

Safari 中的剪辑可能与您使用的 Safari 版本有关。在 Safari 中，border-radius 的百分比值仅在 5.1+ 中受支持。我不想认为您的版本就是这种情况，但是，这是可能的。但在我这边（Safari 11.0.2）它没有剪辑就通过了。

安全的方法是切换固定的border-radius 或50px 的百分比，因为您的宽度和高度是固定的。

img {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

&lt;img src="http://www.duoziwang.com/uploads/1602/1-160221222J70-L.jpg" alt=""&gt;

【讨论】：