背景颜色通过具有完全相同大小的SVG图标显示

Question

首先让我知道你这个问题。我有一个具有这些属性的锚：

.upvote_box a { width: 20px; height: 21px; display:block; background-color: #828282; background-image: url(../imgs/upvote.svg); background-size: 20px 21px; }

background-color有一个含义，因为它通过CSS3过渡转换为不同的颜色。所以我的SVG是一个带有切割手形图标的白色盒子。 Chrome桌面上的渲染很好。但后来我检查了Safari，我在这个锚点周围看到了这些小线条。然后我在其中创建了一个带有1px border的SVG图标。那么之后SVG的维度是width: 22px; height:23px;当然我也改变了CSS中的所有设置。但我还添加了一件事来防止这种情况发生 - box-shadow: inset 0px 0px 0px 1px #fff - 这解决了Safari在桌面上的问题。但问题仍然存在于移动Chrome和移动版Safari上。

这就是它的样子：

还有链接到JSFiddle：Fiddle

谢谢！

Answer 1

添加：

-webkit-appearance: none;

或者这个：

-webkit-box-shadow: inset 0px 0px 0px 1px #fff