Question

我想在文本前放置一个图标图像。任何HTML标记，例如＆lt; img＆gt;应该避免，因为HTML结构的任何更改都可能影响我们的javascript代码。

我编写了以下代码，它可以在IE8 / Firefox的屏幕上运行。

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv='X-UA-Compatible' content='IE=8' />
  <style type="text/css">
  div.before-test:before {
    content: url("sample.png");
  }
  </style>
</head>
<body>
<div>aaaa</div>
<div>bbbb</div>
<div class="before-test">cccc</div>
<div>dddd</div>
</body>
</html>

但是，当访问者尝试使用IE8打印网页时，图像会消失。即使使用IE8打印，如何显示图像，还是必须为图像添加HTML标记？

Answer 1

IE8支持之前但不支持兼容模式。

Answer 2

我认为您应该查看本指南，了解某些浏览器支持哪些属性和内容，尤其是IE 6及更高版本。

http://www.quirksmode.org/css/contents.html

顺便说一下，url()中的网址 - 引号是可选的。最好不要没有避免不必要的逃避问题

http://www.w3.org/TR/CSS2/syndata.html#value-def-uri

<style type="text/css">
    div.before-test:before {
        content: url(sample.png);
    }
</style>

Answer 3

我能找到的唯一方法是来自stackoverflow。我知道，这不是一个好方法，但我想这个bug没有解决方案

HTML：

<div class="PrintOnly">
  <img id="PrintLogo" src="sample.png"/>
</div>

CSS：

  .PrintOnly {         display:none; } 
   @media print {  
      .PrintOnly {     display:block; }
   }

IE8不会在伪元素之前打印图像

3 个答案: