帶有背景圖像的 Internet Explorer 偽元素

Question

現代 Internet Explorer (8-11) 的所有版本都非常奇怪地顯示了一個帶有背景圖像的“:after”偽元素。 它應該是在頂部導航下方直行的一行點，作為“心臟監視器 blip”的延續。 相反，它們顯示如下：

這是網站本身： http : //www.makingthedidiffference.ca/

背景圖像本身是一個 svg，我知道並非所有 IE 都完全支持它，但根據我在 BrowserStack 上的測試，它正在上傳並在 IE 9、10 和 11 中正常顯示。

在 BrowserStack 上的 IE 控制台中， :after 元素被完全划掉，好像 IE 發現它們有問題，並且點顯示不均勻（如上圖）。 我確實有多個偽元素，因為該網站是移動響應的。

在 Chrome、Firefox 和 Safari 中顯示良好。

另外，不幸的是，我不能使用 border-bottom dotted，這些點的形狀不正確。

Answer 1

您的頁面有 52 個標記錯誤.....

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

第 137 行，第 26 列：在此上下文中，元素 div 不允許作為元素 ul 的子元素。 （抑制來自此子樹的更多錯誤。）

.... Web 瀏覽器在“正確”編碼錯誤的方式上有所不同.....

HTML5 規范是第一個指定 userAgents 應如何糾正標記和表示 (css) 錯誤的 W3 規范......

如果您更正標記錯誤（例如...使用

i/o for a child）所有瀏覽器都會使您的網站“或多或少”相同，因為無需解釋應如何糾正“錯誤”。

Answer 2

經過一番折騰，我決定用 Adob​​e Illustrator 重新保存 SVG，這解決了所有支持 SVG 的 IE 版本的問題。 我不知道為什么 SVG 對 IE 出錯，以及為什么它對 Firefox、Chrome 和 Safari 運行得非常好，但確實如此。

Answer 3

這是關於設置寬度和高度屬性：

<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=""