html - 带背景图片的 Internet Explorer 伪元素

标签 html css internet-explorer cross-browser pseudo-element

现代 Internet Explorer (8-11) 的所有版本都非常奇怪地显示一个带有背景图像的“:after”伪元素。它应该是直接位于顶部导航下方的一行点,作为“心脏监视器信号”的延续。相反,它们是这样显示的:

enter image description here

这是网站本身:http://www.makingthedifference.ca/

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

在 BrowserStack 的 IE 控制台中,:after 元素被完全划掉,好像 IE 正在寻找它们的错误,并且点显示不均匀(如上图)。我确实有多个伪元素,因为该网站是移动响应的。

在 Chrome、Firefox 和 Safari 上显示良好。

此外,不幸的是,我不能使用 border-bottom dotted,点的形状不正确。

最佳答案

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

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

第 137 行,第 26 列:在此上下文中,元素 div 不允许作为元素 ul 的子元素。 (抑制来自该子树的更多错误。)

.... 网络浏览器在“纠正”编码错误的方式上有所不同......

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

如果您更正您的标记错误(例如...使用

  • i/o 给 child )所有浏览器都会“或多或少”呈现您的网站,因为不需要解释应该如何纠正“错误”。

  • 关于html - 带背景图片的 Internet Explorer 伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27113206/

    相关文章:

    html - 我怎样才能使下面的表格居中?

    javascript - 在javascript中使用子字符串清除字符串的最后一个字母

    javascript - 不使用 Tamper Monkey 运行用户脚本

    javascript - 为什么javascript程序不运行

    facebook - "FB is undefined"IE8错误

    javascript - Web 浏览器正在按字母顺序编译 css 元素

    html - 悬停取决于 Chrome 中的字体大小

    android - CSS3 背景位置动画在移动设备上滞后

    javascript - 防止正文滚动(移动、 native 浏览器)

    javascript - 脚本 438 : Object doesn't support property or method 'debug'