Internet Explorer伪元素与背景图像

Question

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

以下是网站本身：http://www.makingthedifference.ca/

背景图片本身是一个svg，我知道并不是所有的IE都完全支持，但根据我在BrowserStack上的测试，它正在上传并在IE 9,10和11中显示正常。

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

Chrome，Firefox和Safari显示效果很好。

另外，遗憾的是，我不能使用边框底部点缀，点不是正确的形状。

Answer 1

您的网页有52个标记错误.....

http://validator.w3.org/check?uri=http%3A//www.makingthedifference.ca/

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

....网络浏览器的不同之处在于＆＃39;正确＆＃39;编码错误.....

HTML5规范是第一个指定userAgents应如何纠正标记和表示（css）错误的W3规范....

如果您更正了标记错误（例如......对孩子使用

i / o），所有浏览器都会将您的网站呈现为“更多或更少”。同样没有必要解释错误＆＃39;应该纠正。

Answer 2

经过多次尝试后，我决定用Adobe Illustrator重新保存SVG，这解决了支持SVG的所有IE版本的问题。我不知道为什么SVG错误的IE浏览器，以及它为什么在Firefox，Chrome和Safari上运行得非常好，但确实如此。

Answer 3

这是关于设置width和height属性的：

<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 =“”