印刷圖例

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

回答

相關問題