Question

我使用以下 CSS 代码：

.el {
  width: 20px;
  height: 20px;
  background-color: steelblue;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M29.839 10.107q0 0.714-0.5 1.214l-15.357 15.357q-0.5 0.5-1.214 0.5t-1.214-0.5l-8.893-8.893q-0.5-0.5-0.5-1.214t0.5-1.214l2.429-2.429q0.5-0.5 1.214-0.5t1.214 0.5l5.25 5.268 11.714-11.732q0.5-0.5 1.214-0.5t1.214 0.5l2.429 2.429q0.5 0.5 0.5 1.214z'%3E%3C/path%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center center;
  background-repeat: no-repeat;  
  color: #fff;
}

小提琴：https://jsfiddle.net/z8gb3bzL/

该元素在所有桌面浏览器上以及iPhone，iPad，Blackberry和Windows手机（即无处不在）上正确呈现..除了Android。我尝试了4.3版并仍然出现图形故障：

它看起来像剪裁背景而不是调整它。我也试过使用外部svg图像，但我得到了相同的结果。

我到处搜索（google＆＃39; d，caniuse等），并且没有看到有关此案例的任何报告错误。有什么想法吗？

Answer 1

..为了上帝的缘故！我一直试图将这个bug搞砸了好几天，这让我很震惊。 svg图像需要，为了工作，设置了等于视图框的宽度：/

很抱歉由于我的帖子造成的任何不便 - 希望它可以帮助有同样问题的人。

<...>
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' **width='32' height='32'**%3E%3Cpath fill='%23fff' d='M29.839 10.107q0 0.714-0.5 1.214l-15.357 15.357q-0.5 0.5-1.214 0.5t-1.214-0.5l-8.893-8.893q-0.5-0.5-0.5-1.214t0.5-1.214l2.429-2.429q0.5-0.5 1.214-0.5t1.214 0.5l5.25 5.268 11.714-11.732q0.5-0.5 1.214-0.5t1.214 0.5l2.429 2.429q0.5 0.5 0.5 1.214z'%3E%3C/path%3E%3C/svg%3E");
<...>

更新（在Android上工作）小提琴： https://jsfiddle.net/z8gb3bzL/1/

Android

1 个答案: