样式在打印情况下不生效的原因
2017-05-04 本文已影响0人
super__皮皮
打印时的生效样式有两种写法
1.在head里面的style标签加midia=“print”属性
<style type="text/css" media="print">
#printHidden{
display: none;
}
</style>
2.在外链.css文件中用@media print {}
@media print {
#printHidden{
display: none;
}
}
第一种写法样式不生效的原因是因为有内联样式和style标签里面的样式冲突 比如
<head>
<style type="text/css" media="print">
#printHidden{
display: none;
}
</style>
</head>
<body>
<span id="printHidden" style="display:block;font-size:16px;background:red">打印时隐藏<span>
</body>
这种写法在打印页面是可以看到span的 改进的办法就是这样
<style type="text/css" media="print">
#printHidden{
display: none;
font-size:16px;
background:red
}
</style>
<style type="text/css" >
#printHidden{
display: inline;
font-size:16px;
background:red
}
</style>
</head>
<body>
<span id="printHidden">打印时隐藏<span>
</body>
大家尽量使用第二种方法，尽量不要使用内联样式。
