Html 带背景图像的Internet Explorer伪元素

现代Internet Explorer（8-11）的所有版本都显示了一个“：after”伪元素，其中有一个非常奇怪的背景图像。它应该是一条笔直地在topnav下方的点线，作为“心脏监护仪光点”的延续。相反，它们显示如下：

以下是网站本身：

背景图像本身是一个svg，我知道并不是所有IEs都完全支持它，但根据我在BrowserStack上的测试，它正在上传，并在IE9、10和11中显示良好

在BrowserStack上的IE控制台中，元素：after被完全划掉，就好像IE发现了它们的缺点一样，点显示不均匀（如上图所示）。我有多个伪元素在那里，因为该网站是移动响应

在Chrome、Firefox和Safari上显示良好

---

此外，不幸的是，我不能使用边框底部虚线，点的形状不正确。

您的页面有52个标记错误

第137行第26列：在此上下文中，元素div不允许作为元素ul的子元素。（正在抑制来自此子树的进一步错误。）

。。。。web浏览器在“纠正”编码错误方面存在差异

HTML5规范是第一个指定用户代理如何纠正标记和表示（css）错误的W3规范

---

如果您更正了标记错误（例如，对孩子使用i/o），所有浏览器都会使您的网站“或多或少”相同，因为不需要解释如何更正“错误”。

经过多次修改后，我决定用Adobe Illustrator重新保存SVG，这解决了所有支持SVG的IE版本的问题。我不知道为什么SVG在IE中出错，为什么它在Firefox、Chrome和Safari中工作得非常好，但它确实做到了

关于设置宽度和高度属性：

<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 280 542" style="enable-background:new 0 0 280 542;" xml:space="preserve" width="280" height="542">

---

正如您所见，viewBox的最后两位数字需要添加到width=“”和height=“”

Opera（12）以相同的方式显示。我认为这确实是SVG背景图像的一个问题，至少部分是这样。查看图像本身，如中所示，左侧的白点分布不均匀-当图像以较小的3像素高度显示时，位于“中间线”上方或下方的白点可能会由于舍入差异而被切割，如在实际的

：after

元素中。使用W3验证程序是个好主意！我检查了在光点线问题附近出现的错误并修复了它们，包括将ul中的div更改为li。但是，唉，这不是问题所在。如果你要解决其中任何一个问题，你就不能挑三拣四。不要偷懒。