美文网首页
样式在打印情况下不生效的原因

样式在打印情况下不生效的原因

作者: super__皮皮 | 来源:发表于2017-05-04 17:02 被阅读0次

    打印时的生效样式有两种写法
    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>
    

    大家尽量使用第二种方法,尽量不要使用内联样式。

    相关文章

      网友评论

          本文标题:样式在打印情况下不生效的原因

          本文链接:https://www.haomeiwen.com/subject/zykdtxtx.html