印刷图例

div.task_finished { background-color:#6b86a6; } 
div.task_pending_execute { background-color:#93b8e2; } 
div.task_cancelled { background-color:#ff9966; } 
div.task { background-color:#ffffcc; }

现在我想打印印刷图例

<div class="legend-container"> 
      <div class="legend"> 
       <div class="task_pending_execute"></div> 
       <div class="legend-text">Executing</div> 
      </div> 
      <div class="legend"> 
       <div class="task_cancelled"></div> 
       <div class="legend-text">Finished</div> 
      </div> 
     ... 
</div>

here what I've got

对于IE图形呈现为图像。

用户浏览器设置为不打印默认background-color，但在这一具体情况

我还是不想替补多“颜色” DIV在这里通过图片不能接受的。

我应该用什么css属性来代替？

来源

2011-01-26 jonny

您可以尝试使用彩色边框，这样的事情：

div.task_finished { border-left:#6b86a6 solid 100px; height: 1em; }

不过，我不知道IE在打印时将边界视为背景或前景。

[编辑：另一个想法]

另一种解决方案将是使用Unicode Block Elements然后设置前景（文字）色。

<div>&#x2588;&#x2588;&#x2588;&#x2588;&#x2588;</div> 
<div>█████</div>

但是，如果系统没有适当的Unicode支持或没有正确的字体，这将会失败。

此外，由于不同的字体具有不同的宽度，因此它将不会控制图例的宽度。（也许CSS @font可以帮你解决这个问题，但我不确定）

最后，也许根据字体，每个字符之间可见“接缝”。（这可能是“固定”通过设置一个负值letter-spacing）

来源

2011-01-26 11:52:39

IE打印边框，这似乎是一个有效的黑客，但我已经使用边框属性:( – jonny 2011-01-26 12:00:02

不是你真的可以做任何事情。背景颜色/图像打印的打印机选项，不是你真的应该指望 - http://css-tricks.com/dont-rely-on-background-colors-printing/

来源

2011-01-26 11:52:14

回答

相关问题