Question

我有一个图标，我想在rem中添加背景大小，以便在增加网站的字体大小时可以调整大小：

https://codepen.io/stephendesjardins/project/full/ZjVOMG

我有这个CSS：

.box {
  width:20px;
  height:20px;
}
.box:before {
    content: "";
    position: absolute;
    top: .25rem;
    left: 0;
    background-image: url(../icon.svg);
    width: 1.1875rem;
    height: 1.1875rem;
    background-repeat: no-repeat;
    background-size: 1.1875rem 1.1875rem;
}

这是图标：

<svg version="1.1" id="ic-liens" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 19 19" xml:space="preserve"><path id="fleche" fill="#007944" d="M6.5 4.986l4.472 4.513L6.5 14.012l1.069 1.538L13.5 9.499 7.569 3.55z"/><path id="cercle" fill="#007944" d="M9.5 0C4.3 0 0 4.3 0 9.5S4.3 19 9.5 19 19 14.7 19 9.5 14.7 0 9.5 0zm0 17.3c-4.3 0-7.8-3.5-7.8-7.8s3.5-7.8 7.8-7.8 7.8 3.5 7.8 7.8-3.5 7.8-7.8 7.8z"/></svg>

在chrome中可以很好地呈现：但是它ie11呈现如下：

这似乎是由于rem中的背景大小引起的。如果我添加像素就可以了。如果我添加的基本字体大小为10的网站，则rem有效。

任何帮助将不胜感激

Answer 1

我注意到IE11会将任何值截断到两位小数位。您可以通过在IE11调试器中键入width：1.1875rem和height：1.1815rem进行测试，两个值都将变为1.18rem。

由于此舍入错误，最有可能是IE11下的图标图像剪切。通过将1.1875rem截断为1.18rem，您在width和height中损失了0.0075rem。在base-fontsize = 10下，这相当于损失0.075像素。例如，对于base-fontsize = 16，此损耗增加到0.12px，并可能影响图像的显示。

为解决此问题，我建议您使用一个函数，通过一个 ceil （）函数从$ pixel计算$ rem，如以下数学方程式所示：

rem = 上限（pixel / base-fontsize * 100）/ 100;

现在，您的width = height = 1.1875rem将四舍五入为1.19rem，将为您的图像留出更多空间并正确显示。

Answer 2

尝试一下：

https://gist.github.com/vielhuber/34c3d9a0b424b14928e496f898265b3a

首先将所有svg转换为png：

find . -name '*.svg' -type f -exec svgexport {} "{}".png 300: \;

然后在Apache的帮助下，在IE / Edge的情况下动态切换它们：

RewriteCond %{HTTP_USER_AGENT} Trident|MSIE|Edge [NC]
RewriteCond %{REQUEST_URI} \.(svg)$ [NC]
RewriteCond %{REQUEST_FILENAME}.png -f
RewriteRule ^ %{REQUEST_URI}.png [QSA,L

我从未找到解决此问题的另一种方法。

Answer 3

我遇到了同样的问题并找到了这个页面。我认为此解决方法可能有用。

首先我发现这个问题出现在SVG的宽高是十进制值的时候，比如15.8px。即使我使用了px，也会出现这个问题。 rem 本身并不是直接原因。

那么下面的设置是写在很多站点使用rem的。

html {
  font-size: 62.5%; /* = 10px */
}

然而，这会导致十进制基本字体大小（font-size 元素的html），因此 SVG 的宽度/高度也将变为十进制值。为了避免这种情况，在另一个问题中介绍了以下内容。
Font size in Internet Explorer is different

html {
  font-size: calc(10em / 16)
}

最后，只要您将宽度/高度设置为正整数，您就可以使用 rem。

rem中的背景大小会导致ie11和edge

3 个答案: