在網(wǎng)站制作的過程中,我們常常需要設置橫向打印功能來方便用戶打印頁面。而IE瀏覽器是使用CSS實現(xiàn)頁面橫向打印最棘手的一個瀏覽器,因為IE無法支持常規(guī)的CSS樣式。
但是,我們可以通過特定的CSS代碼來解決這個問題。下面給大家介紹一下實現(xiàn)IE橫向打印的CSS代碼:
@media print { @page { size: landscape; } html,body { width: 100%; height: 100%; margin: 0; padding: 0; } * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .no-print,.no-print *{ display:none; } }
該段CSS代碼主要用到了@media print,其作用是設置打印樣式。首先,我們設置頁面方向為landscape,這樣橫向排列就實現(xiàn)了;接著,我們設置html和body的寬和高為100%,margin和padding都為0。然后,我們使用*選擇器將所有元素的盒模型改為border-box,這樣就不會出現(xiàn)因為邊框或者內(nèi)邊距導致的寬度超出打印紙。最后,我們將所有class為no-print的元素和其子元素設為display:none,這樣就可以隱藏這些元素不被納入打印。
通過以上代碼的設置,我們就可以實現(xiàn)在IE瀏覽器上的橫向打印了。同時,我們還可以在其他瀏覽器上使用正常的CSS樣式來設置橫向打印,這樣就可以達到兼容各種瀏覽器的效果。