标志未出现在媒体印刷品中 - IE8答案

【问题标题】：logo not appearing in media print - IE8标志未出现在媒体印刷品中 - IE8
【发布时间】：2015-11-11 18:00:24
【问题描述】：

我已经尝试解决这个问题 2 个小时了，但没有运气。 less 代码 sn-p 在除 IE8 之外的所有浏览器中都能正常工作。我检查了 IE8 支持 :after 和 :before

我正在使用标准的 IE8 文档类型，使用 HTML5 shiv 并且也没有在兼容模式下运行它？

@media print {
      .app-header .large-header {

                    .logo span,
                    h1,
                    .action-links {
                        display: none;
                    }

                    .logo:before {
                        content: url('images/logo.png');
                        position:absolute;
                        top:0;
                        left:0;
                        width:150px;
                        height:28px;
                    }
                }
}

更新

问题是 IE8 不支持打印内容 url。解决方法是改用图片。

【问题讨论】：

标签： css internet-explorer-8 cross-browser less

【解决方案1】：

IE8 不支持媒体查询：@media print {} is not supported.

为 IE8 创建一个单独的 css 并在 HTML 中放置这样的条件：

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

自己看看https://msdn.microsoft.com/en-us/library/ms530813(v=VS.85).aspx

动态 HTML (DHTML) 表达式可以用来代替前面的值。从 Windows Internet Explorer 8 开始，表达式不再在 IE8 标准模式下支持。有关详细信息，请参阅关于动态属性。

【讨论】：

"IE8 绝对支持媒体打印。它可以正常工作并拾取除徽标以外的所有样式。问题出在其他地方。
拥有额外的打印样式表或主样式表中的打印样式不会在 IE8 上引起问题。问题是 IE8 在使用 :before 伪类实现时将无法显示徽标。除此之外，我也总是选择特定于 IE8 的样式表，以覆盖在此浏览器中不起作用的内容（如果我必须支持的话）。

【解决方案2】：

我不知道您的标记，但可以选择删除徽标的背景图像并使用实际的<img> 标记吗？

这样您就不需要为打印页面更改很多样式。您还应该记住，有很多打印机默认禁用背景图像和背景颜色！

【讨论】：