Safari Mobile 和对象位置属性

Question

我有一个关于 Safari Mobile 和 CSS object-position/object-fit 属性.

的问题

我尝试过使用它，但它对我不起作用。

我看到了 2 个不同的答案（Safari Mobile 支持此属性和不支持）

有我的例子：

img {
  object-position: 0 -300px;
  width: 112px;
  height: 50px;
  display: block;
  float: left;
  margin-right: 10px;
}

我使用 CSS 精灵作为菜单图标 img，而不是 background。

我该如何解决这个问题？

Answer 1

iOS safari 支持 object-fit 但是不支持 object-position

¹ Partial support in Safari refers to support for object-fit but not object-position.

一个可能的解决方案是使用 background 和 background-position

如果您使用的是图标，其他解决方案将使用来自 Font-Awesome 或 Glyphicons 的字形，仅举几例。

这是一篇关于 CSS sprites

的好文章

Safari Mobile and object-position property