網頁設計中,為了設定列印範圍,而將不想呈現及列印出來的部份用{display:none}隱藏div區塊內容,這在ie8正常,ie6無效,爬了很多文都找不到解決的辦法,請問有對應之css hack可解決此問題?問題原始碼參考如下:
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<style>
#JustPrint {display:none}
@media print {
#JustPrint { display:block; font:9pt verdana; letter-spacing:2px;}
#NoPrint {display:none}
}
</style>
<span id="NoPrint"><input type="button" value="Print" onClick="window.print()"><br></span>
[Print]按鈕，看得到，但印不到<br>
這裡是本文區，看得到，也印得到
<span id="JustPrint">這裡是LOGO，看不到，但印得到</span>
已邀請的邦友 {{ invite_list.length }}/5
由於我的IE 6用的是MultipleIEs的版本，列印預覽和列印好像都不管用，所以沒有辦法實測display:none的bug。
不過有一個歪招，應該可以達到你要的效果。
<pre class="c" name="code"><style>
#JustPrint {display:none;_margin-left:-9999px}
@media print {
#JustPrint { display:block; font:9pt verdana; letter-spacing:2px;_margin-left:0}
#NoPrint {display:none;_margin-left:-9999px}
}
</style>
這招是利用ie 6 css hack的方法，利用_margin-left將不想顯示的物件拉到-9999px的地方，這樣子列印時就不會出現。你可以試試在IE 6上管不管用，記得margin前一定要加上一條底線，那是讓ie 6認的。
結論是:
class=xxxx
不是id=xxxx
iThome鐵人賽
看影片追技術