導航:首頁 > 萬維百科 > 網頁列印div高度設計無效

網頁列印div高度設計無效

發布時間:2020-12-12 00:27:43

1、IE下列印透明div

div 有必要半透明嗎? 如果是用濾鏡實現的,那換個實現方法 圖片可以當做背景來實現 然後再試試

2、js 給div賦值 就是沒效果啊 alert能彈出來看到值 就是不在頁面上列印

JS代碼中復的ID沒寫對,應該是制"message",你看對不?

function printTo(msg){
alert("msg "+msg);
var _content=document.getElementById("message").innerHTML;
alert("content : "+_content);
_content=_content+"<br>"+message;
alert("累加後content "+_content);
document.getElementById("message").innerHTML=_content;
//alert(document.getElementById("message").innerHTML);
}

加上overflow-y:scroll後,文本框右邊會出現滾動條,要拉下來才能看到下面新增的文字。

3、div 頁面列印下面一層是 圖片,上面一層是文字,為什麼只列印文字,沒有列印圖片

大部分瀏覽器通常都不列印背景,因為列印機質量效果不同,輸出的文字內和背景色容易造成閱讀容困難

從css角度來講,如果需要列印背景,一般得針對列印寫一份列印樣式,例如你想列印一個背景圖<img src="fuck.jpg" id="fuck"/> 那麼在屏幕顯示的樣式表中添加#fuck{display:none;} 之後在列印樣式表中添加#fuck{display:inline;}這樣列印的時候才會顯示出來。

如果是提供給自己看,截圖列印最省事了

4、js 列印問題,症狀;有時管用,有時不管用。估計更列印的div層有關,列印任一div都沒問題。

newWin.document.location.reload();
吧這句去掉試試、
這句是重新載入、

5、網頁製作中,想列印出隱藏的元素,注意不是在列印時隱藏,而是隱藏元素的列印,css屬性應該如何設置?

很簡單,再寫一個列印專用的css文件,讓隱藏的東西再顯示出來,這並不影響屏幕上的顯示效果。
在網頁頭部調用
<link href="用於列印的css文件地址" type=「text/css」 rel=「stylesheet」 media=「print」 />
media=「print」 意思就是在列印的時候啟用該樣式。

6、chrome瀏覽器裡面 css設置 div高度 200mm,但是列印預覽時 出來的卻是214mm,有這么大的偏差,怎麼解決?

列印機認的css和瀏覽器認的不一樣,需要單獨寫。

@media print {
樣式名{
...
}
}
方式單獨寫列印機需要認的內容。

7、jquery.PrintArea列印指定div,列印結果不全

可以先把列印區域高度調高,列印完之後再變回去,臨時解決方案吧,不知道有沒有更好的方法

8、CSS使用的問題

分享:CSS使用技巧20則
1. CSS字體屬性簡寫規則

一般用設定字體屬性是這樣做的:

font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

但也可以把它們全部寫到一行上去:

font: bold italic small-caps 1em/1.5em verdana,sans-serif

真不錯!只有一點要提醒的:這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且,如果你沒有設定font-weight, font-style, 以及 font-varient ,他們會使用預設值,這點要記上。

2. 同時使用兩個類

一般只能給一個元素設定一個類(Class),但這並不意味著不能用兩個。事實上,你可以這樣:

<p class="text side">...</p>

同時給P元素兩個類,中間用空格格開,這樣所有text和side兩個類的屬性都會加到P元素上來。如果它們兩個類中的屬性有沖突的話,後設置的起作用,即在CSS文件中放在後面的類的屬性起作用。

3. CSS border的預設值

通常可以設定邊界的顏色,寬度和風格,如:

border: 3px solid #000

這位把邊界顯示成3像素寬,黑色,實線。但實際上這里只需要指定風格即可。

如果只指定了風格,其他屬性就會使用預設值。一般地,Border的寬度預設是medium,一般等於3到4個像素;預設的顏色是其中文字的顏色。如果這個值正好合適的話,就不用設那麼多了。

4. CSS用於文檔列印

許多網站上都有一個針對列印的版本,但實際上這並不需要,因為可以用CSS來設定列印風格。

也就是說,可以為頁面指定兩個CSS文件,一個用於屏幕顯示,一個用於列印:

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />

<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

第1行就是顯示,第2行是列印,注意其中的media屬性。

但應該在列印CSS中寫什麼東西呢?你可以按設計普通CSS的方法來設定它。設計的同時就可以把這個CSS設成顯示CSS來檢查它的效果。也許你會使用 display: none 這個命令來關掉一些裝飾圖片,再關掉一些導航按鈕。要想了解更多,可以看「列印差異」這一篇。

5. 圖片替換技巧

一般都建議用標準的HTML來顯示文字,而不要使用圖片,這樣不但快,也更具可讀性。但如果你想用一些特殊字體時,就只能用圖片了。

比如你想整個賣東西的圖標,你就用了這個圖片:

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

這當然可以,但對搜索引擎來說,和正常文字相比,它們對alt裡面的替換文字幾乎沒有興趣這是因為許多設計者在這里放許多關鍵詞來騙搜索引擎。所以方法應該是這樣的:

<h1>Buy widgets</h1>

但這樣就沒有特殊字體了。要想達到同樣效果,可以這樣設計CSS:

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

注意把image height換成真的圖片的高度。這里,圖片會當作背景顯示出來,而真正的文字由於設定了-2000像素這個縮進,它們會出現在屏幕左邊2000點的地方,就看不見了。但這對於關閉圖片的人來說,可能全部看不到了,這點要注意。

6. CSS box模型的另一種調整技巧

這個Box模型的調整主要是針對IE6之前的IE瀏覽器的,它們把邊界寬度和空白都算在元素寬度上。比如:

#box
{
width: 100px;
border: 5px;
padding: 20px
}

這樣調用它:

<div id="box">...</div>

這時盒子的全寬應該是150點,這在除IE6之前的IE瀏覽器之外的所有瀏覽器上都是正確的。但在IE5這樣的瀏覽器上,它的全寬仍是100點。可以用以前人發明的Box調整方法來處理這種差異。

但用CSS也可以達到同樣的目的,讓它們顯示效果一致。

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

這樣調用:

<div id="box"><div>...</div></div>

這樣,不管什麼瀏覽器,寬度都是150點了。

7. 塊元素居中對齊

如果想做個固定寬度的網頁並且想讓網頁水平居中的話,通常是這樣:

#content
{
width: 700px;
margin: 0 auto
}

你會使用 <div id="content"> 來圍上所有元素。這很簡單,但不夠好,IE6之前版本會顯示不出這種效果。改CSS如下:

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}

這會把網頁內容都居中,所以在Content中又加入了
text-align: left 。

8. 用CSS來處理垂直對齊

垂直對齊用表格可以很方便地實現,設定表格單元 vertical-align: middle 就可以了。但對CSS來說這沒用。如果你想設定一個導航條是2em高,而想讓導航文字垂直居中的話,設定這個屬性是沒用的。

CSS方法是什麼呢?對了,把這些文字的行高設為 2em:line-height: 2em ,這就可以了。

9. CSS在容器內定位

CSS的一個好處是可以把一個元素任意定位,在一個容器內也可以。比如對這個容器:

#container
{
position: relative
}

這樣容器內所有的元素都會相對定位,可以這樣用:

<div id="container"><div id="navigation">...</div></div>

如果想定位到距左30點,距上5悖

9、html,用css設置div的position:fixed,用chrome頁面列印無法列印div內

請更詳細地描述問題,貼出代碼和效果圖

10、chrome瀏覽器裡面 css設置 div高度 200mm,但是列印預覽時 出來的卻是214mm,有這么大的偏差怎麼解決?

你好,請參看mm的兼容性

如果你的谷歌瀏覽器是4.0版本一下的不會支持這個單位,建議使用px和em代替

與網頁列印div高度設計無效相關的知識