CSS @Media print樣式在chrome下不起作用?還是我不會用啊!


現在做一個頁面打印,因為有一個返回按鈕不能打印出來,所以想讓它在打印時不起作用,上網查了說@Media print是專用於打印的樣式,用了一下,用法如下:
//先定義樣式
<style>
@media print{
  .noprint{
     display:none
  }
}
</style>

//再把該樣式加到不想打印的元素上(此處為返回按鈕)
<input class="noprint" type="button" value="返回" onclick="javascript: location.href='XXX';return false;"/>

在IE下確實可以達到不打印該按鈕的效果,但是在chrome下和360等瀏覽器的極速模式下就不行,按鈕照樣會打印出來,我現在想問是因為我使用不當呢還是這個Css媒體樣式不只適用於IE系的瀏覽器呢?

在chrome下如何達到讓某些元素不打印的效果呢?

大神、大哥、大姐不吝賜教!感激不盡!

12 个解决方案

#1


這個問題很不常見嗎?怎么都沒有人幫下忙啊!

#2


不啊,我測試了下,各瀏覽器都對的。

#3


引用 2 樓 leli_1017 的回復:
不啊,我測試了下,各瀏覽器都對的。


是嗎?我這兒怎么不行啊,把我寫的一個簡單的例子給你看看,給指正指正:


<html>
<head>

<style>
@media print{
  .noprint{
     display:none
  }
}
</style>

</head>
<body>

<input class="noprint" type="button" value="打印" onclick="javascript:window.print();"/>
<input type="button" value="返回" onclick=""/>
</body>

#4


引用 3 樓 u011786100 的回復:
Quote: 引用 2 樓 leli_1017 的回復:

不啊,我測試了下,各瀏覽器都對的。


是嗎?我這兒怎么不行啊,把我寫的一個簡單的例子給你看看,給指正指正:


<html>
<head>

<style>
@media print{
  .noprint{
     display:none
  }
}
</style>

</head>
<body>

<input class="noprint" type="button" value="打印" onclick="javascript:window.print();"/>
<input type="button" value="返回" onclick=""/>
</body>


這個在IE下打印按鈕是不會被打印出來的,但在其他瀏覽器下該按鈕還是會打印出來!

#5


引用 4 樓 u011786100 的回復:
Quote: 引用 3 樓 u011786100 的回復:

Quote: 引用 2 樓 leli_1017 的回復:

不啊,我測試了下,各瀏覽器都對的。


是嗎?我這兒怎么不行啊,把我寫的一個簡單的例子給你看看,給指正指正:


<html>
<head>

<style>
@media print{
  .noprint{
     display:none
  }
}
</style>

</head>
<body>

<input class="noprint" type="button" value="打印" onclick="javascript:window.print();"/>
<input type="button" value="返回" onclick=""/>
</body>


這個在IE下打印按鈕是不會被打印出來的,但在其他瀏覽器下該按鈕還是會打印出來!


問題解決了嘛?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test</title>
<style type="text/css">
@media print {   
.noprint {    
display: none    
}   
}  
</style>

</head>
<body>

<input type="button" value="打印" onclick="javascript:window.print();"/>

<input class="noprint" type="button" class="noprint" value="返回" onclick=""/></div>
</body>
</html>

#6


我發現問題了, 你的display前面有東西  我把前面空格還是什么刪掉就行了,應該不是空格

#7


歸根結底就是你用的這個前面有不明的輸出

#8


引用 6 樓 leli_1017 的回復:
我發現問題了, 你的display前面有東西  我把前面空格還是什么刪掉就行了,應該不是空格


萬分感謝了,這個東西也讓你給找出來了,要讓我怎么也想不到啊,就算是你說了, 我也看着這個前面就是幾個空格啊!這個代碼我是從網頁上copy下來,也不知道帶了些什么東西!不管怎么說,再次感謝!

#9


引用 8 樓 u011786100 的回復:
Quote: 引用 6 樓 leli_1017 的回復:

我發現問題了, 你的display前面有東西  我把前面空格還是什么刪掉就行了,應該不是空格


萬分感謝了,這個東西也讓你給找出來了,要讓我怎么也想不到啊,就算是你說了, 我也看着這個前面就是幾個空格啊!這個代碼我是從網頁上copy下來,也不知道帶了些什么東西!不管怎么說,再次感謝!


這個東西到底是什么呢?除了空格與制表符還有什么呢?

#10


引用 9 樓 u011786100 的回復:
Quote: 引用 8 樓 u011786100 的回復:

Quote: 引用 6 樓 leli_1017 的回復:

我發現問題了, 你的display前面有東西  我把前面空格還是什么刪掉就行了,應該不是空格


萬分感謝了,這個東西也讓你給找出來了,要讓我怎么也想不到啊,就算是你說了, 我也看着這個前面就是幾個空格啊!這個代碼我是從網頁上copy下來,也不知道帶了些什么東西!不管怎么說,再次感謝!


這個東西到底是什么呢?除了空格與制表符還有什么呢?

應該是全角空格,網頁上為了輸出美觀用的

#11


@media print { .zfont {font-size:18px;} .underline{text-decoration:underline}}
這樣設置字體大小和下划線沒有作用啊,求解

#12


引用 11 樓 dfl724365477 的回復:
@media print { .zfont {font-size:18px;} .underline{text-decoration:underline}}
這樣設置字體大小和下划線沒有作用啊,求解


是不是你原標簽里已有內聯樣式這些更高優先級的樣式中,你單把這個樣式摘出來,寫一個只有一個td的最簡單網頁,先試試能不能出來,再往自己的復雜頁面里加唄

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com