【发布时间】：2020-01-18 13:54:41
【问题描述】：
我正在做这样的事情（在 React 应用程序中，使用样式化组件）：
a {
position: relative;
}
a::after {
content: '';
position: absolute;
bottom: -10px;
display: block;
height: 8px;
width: 100%;
transform: rotate(180deg);
background: 0 center repeat-x
url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="8px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
<polygon stroke="${encodeURIComponent(
c_NAV_ACTIVE
)}" points="4.5,4.5 0,0 0,1.208 4.5,5.708 9,1.208 9,0 "/>
</svg>');
}
它适用于大多数浏览器，但不适用于 IE 11。这是我试图实现的效果（当前活动页面的下划线）：
我已经查看过类似的帖子，例如this one here 或this article。我已经修改了我的 background 属性，使 HTML 编码如下：
background: 0 center repeat-x
url("data:image/svg+xml;charset=UTF-8,%3C?xml version='1.0' encoding='UTF-8'?%3E
%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100%' height='8px' viewBox='0 0 9 6' enable-background='new 0 0 9 6' xml:space='preserve'%3E
%3Cpolygon stroke='${encodeURIComponent(
c_NAV_ACTIVE
)}' points='4.5,4.5 0,0 0,1.208 4.5,5.708 9,1.208 9,0 '/%3E
%3C/svg%3E");
它仍然无法在 IE 11 中运行。有什么想法吗？如果我将background 的值替换为原始颜色，例如red，则有下划线。显然，IE 对我如何在数据 URL 中使用 SVG 很挑剔。提前致谢！
【问题讨论】：
-
你能试试看你的 a::after CSS 类是否应用在 IE 中吗？如果未应用，请尝试将其添加到容器元素中。对于 IE，我建议你使用简单的 css 下划线来避免 svg 相关的问题。
-
@Deepak-MSFT 感谢您的反馈！是的，课程适用。我可以在 IE11 开发者工具中看到它。此外，如果我用颜色更改 URL 属性，它就可以工作。例如
background: pink工作得很好，即显示下划线。这显然是 svg 作为数据 URI 的一部分的问题。为了保持一致性，我需要让它对于我们支持的所有浏览器看起来都一样，所以很遗憾，在这种情况下使用简单的 CSS 不是一个选项。 -
我尝试通过删除背景值中的一个部分来测试问题，以检查导致此问题的确切部分，但它仍然没有工作，并且没有给出有关问题原因的任何提示.我会尝试做进一步的测试，看看是否有针对 IE 的解决方案或变通方法。
-
是的，这就是我所做的，我只是让它工作。它是正确编码的组合，用单引号交换属性值的双引号，用双引号包裹 URL，不使用
background属性作为简写（所以我不得不将其分解）并添加background-size有 2 个值。我会回答我的问题并在下面发布答案。
标签： css svg internet-explorer-11