如何解決一些問題，印刷非常基本的HTML

我有一些非常簡單的HTML：如何解決一些問題，印刷非常基本的HTML

<div id="advisor"> 
    <div id="print_this_container"> 
     <form> 
      <input type="button" value=" Print this page " 
       onclick="window.print();return false;" /> 
     </form> 
    </div> 
    <div id="top_section"> 
     <div class="left_box" style="position: relative;"> 
      <div id="avatar_container"> 
       <img class="avatar" src="<%= @advisor.avatar_url %>" /> 
      </div> 
     </div> 
     <div class="right_box"> 
      <h2><strong>Council on Emerging Markets</strong></h2> 
     </div> 
    </div> 

</div>

相關的CSS是：

#advisor{ 
    width: 800px; 
} 
#top_section{ 
    border-bottom: 1px solid #666 !important; 
    height: 200px; 
} 
.right_box{ 
    float: left; 
    padding-left: 25px; 
    padding-top: 50px; 
    width: 550px; 
} 
.left_box{ 
    background: #ccc; 
    width: 200px; 
    float: left; 
    text-align: center; 
    height: 100%; 
} 
img.avatar{ 
    width: 150px; 
}

在我的print.css

#advisor{ 
    width: auto; 
    } 
#print_this_container{ 
    display: none; 
    }

它在我的網頁看上去很不錯。然而，當我打印會出現下列問題：

的頂部邊框消失
圖像縮小
下左邊方框顯示右邊框，它不會漂浮
的左框背景顏色消失

有誰知道如何解決這些問題？

來源

2010-07-16 Tony

如何鏈接您的打印樣式表一看Here和Here和Here？請記住，在大多數瀏覽器中不打印背景。 – 2010-07-16 15:20:07

它抓住樣式表很好 – Tony 2010-07-16 16:34:04

有許多與從瀏覽器中打印問題。很多打印特定的東西在大多數瀏覽器上都不起作用，甚至在多個瀏覽器支持的情況下，它的處理方式也有所不同

我們已經花了兩週的時間嘗試使用瀏覽器打印標籤 - 最終，我們已經走了多個解決方案，儘可能優雅地失敗......

首先，我們檢測的Silverlight和Flash - 如果任一存在，我們用它來打印。

接下來，我們有一段代碼，加載一個網頁瀏覽器中存儲在服務器上，並在特定的URL的網頁截圖 - 這個生成的圖像，我們再返回到客戶端進行打印。這對我們的場景是可以的，但你可能想檢查內存使用情況/等。爲高容量的網站。

我們發現了一些東西：（！特別是對於標籤）頁邊距是一個真正的痛苦。似乎只有某些版本的Opera將允許您修改頁面頁邊距CSS

背景圖像和顏色通常不會被瀏覽器打印（爲了節省墨水） - 在大多數瀏覽器中有一個選項可用於打印BG。

在Firefox看在about：config中

print.printer_<PrinterName>.print_bgcolor 
print.printer_<PrinterName>.print_bgimages

在IE瀏覽器，我認爲這是文件 - >頁面設置下...

顯然，這些都不幫你多，因爲他們不能由網站本身設置 - 這取決於用戶是否會有意識地設置該集合。否則，你可能會嘗試在你的內容後面放置一個普通的非背景圖片？

根據我的經驗，float在打印時不起作用 - 但是，我已經嘗試過了一段時間，現在只要您爲頁面提供一個明確的寬度（100％？）目前，我認爲大多數瀏覽器在打印介質上使用「縮小到適合」作爲默認值。

頁面寬度是另一個有趣的 - 我只發現非常有限的「寬度」屬性似乎工作 - 在一點上，我幾乎訴諸表格。到目前爲止百分比似乎工作得很好，汽車沒有。

嘗試有一些解決方案瀏覽器兼容性圖表

來源

2010-07-16 15:53:04 Basic

非常好的信息 – Tony 2010-07-16 17:52:24

如何解決一些問題，印刷非常基本的HTML

回答

相關問題