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的最简单网页,先试试能不能出来,再往自己的复杂页面里加呗
智能推荐

注意!

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



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

赞助商广告