2017-03-08 40 views
-1

我用一個Css樣式表把我的文本框放在正確的位置,在crome txtbox和句子看起來很好,一切都在正確的位置,但是當試圖用ctrl + p打印網站的每一句話和每個文本框移動時,我能做些什麼,所以它看起來一樣?:當試圖打印時,Php表單看起來不同?

<!-- 
#caption_1 { 
position:relative; 
left:-120px; 
top:0px; 
width:175px; 
height:22px; 
font-size:18px; 

} 
--> 

<!-- 
#txtfeld_1 { 
    position:relative; 
    left:-100px; 
    top:0px; 
     width:175px; 
    height:22px; 
    font:Verdana, Arial, Helvetica, sans-serif; 
    font-size:12px; 
    text-align:center; 
} 
--> 

而且我在這裏的文本框,例如:

print '<font size="4" id="caption_1" face="Calibri">Absender Typ/Shipper type:</font></div><input type="text" name="absenderTyp" value="'.$absenderTyp.'" id="txtfeld_1" readonly></div>'; 
+1

使用@media print來定義css僅用於打印和/或強制維護位置。默認情況下,某些內容在準備打印時會被瀏覽器丟棄。 – LordNeo

+0

在使用媒體打印時,txtboxes會改變它們的位置,是否必須將它們對齊,然後打印? – Xxy

+0

將你的普通css複製到@media打印塊中,這應該足以得到一個「相同的位置」的東西,但其他一些東西(如容器寬度)可能會改變這種情況,所以儘量使用明確的 – LordNeo

回答

1

你已經有這樣的事情:

<head> 
    <link rel="stylesheet" href="assets/css/styles.css"> 
</head> 

和styles.css的文件是這樣的:

#caption_1 { 
    position:relative; 
    left:-120px; 
    top:0px; 
    width:175px; 
    height:22px; 
    font-size:18px; 
} 
#txtfeld_1 { 
    position:relative; 
    left:-100px; 
    top:0px; 
     width:175px; 
    height:22px; 
    font:Verdana, Arial, Helvetica, sans-serif; 
    font-size:12px; 
    text-align:center; 
} 

下方添加:

@media print { 
    #caption_1 { 
     position:relative; 
     left:-120px; 
     top:0px; 
     width:175px; 
     height:22px; 
     font-size:18px; 
    } 
    #txtfeld_1 { 
     position:relative; 
     left:-100px; 
     top:0px; 
      width:175px; 
     height:22px; 
     font:Verdana, Arial, Helvetica, sans-serif; 
     font-size:12px; 
     text-align:center; 
    } 
} 

應該強制瀏覽器使用那些相同的樣式在你的頁面的打印版,給你(或多或少)與「屏幕」版本相同的結果。

請記住,一些像頁面寬度這樣的東西通常以屏幕的百分比表示,現在將在頁面寬度上進行計算,但是從您發佈的CSS中,您正在使用靜態測量。

+0

好吧,它至少工作了一點,現在我可以用它們移動它們。 ..「但網站看起來總是一樣的,然後我改變了文本框的位置,它在網站上看起來是一樣的,但在彈出的打印中不同。 – Xxy

+0

您需要重做更改到媒體打印塊以影響可打印版本和正常屏幕版本的普通塊。 – LordNeo

+0

好的thx它的工作,但並不完美,如果我嘗試打印該網站,它看起來在打印彈出相同,但我只是看到現在窗口變小打印時,左側的文本切出一個litte,如果我嘗試更改打印選項,只需#media print內的#caption_1什麼都不會發生 – Xxy

相關問題