CSS印刷 - 奇妙な成果物はChromeにしか表示されません

Question

現在、JS/HTMLアプリケーションを開発しており、印刷が必要なHTMLページがあります。あなたはページがタイトルバーとそれらの内側にいくつかの情報を持っている「パネル」の数で構成されて見ることができるようにページのレイアウトが

<div class="customerOffer"> 
     <div class="buttonHeader"><span class="backButton">Back</span><span class="printButton">Print</span></div> 
     <div class="panel"> 
      <div class="panelTitle"><span class="text">Title</span></div> 
      <div class="panelBox"> 
       <div class="column"> 
        <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div> 
        <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div> 
        <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div> 
        <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div> 
        <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div> 
        <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div> 
       </div> 
       <div class="column right"> 
        <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div> 
        <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div> 
        <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div> 
       </div> 
      </div> 
     </div> 
     <div class="panel"> 
      <div class="panelTitle"><span class="text">Title</span></div> 
      <div class="panelBox"> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="separator"></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row important"><span class="label b">Text</span><span class="inputValueF b">£0.00</span></div> 
      </div> 
     </div> 
     <div class="panel"> 
      <div class="panelTitle"><span class="text">Title</span></div> 
      <div class="panelBox"> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="separator"></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div> 
       <div class="row important"><span class="label b">Text</span><span class="inputValueF b">£0.00</span></div> 
      </div> 
     </div> 
    </div> 

のように見えます。印刷時にこれらのパネルの1つにページが「破損」しないようにするには、page-break-inside: avoid;をこのページの@media printタグのパネルに追加しました。ここにこのHTMLページのLESSがあります。

@import url(https://fonts.googleapis.com/css?family=Roboto); 

@accent: #5280B8; 
@secondary: #1e518d; 
@background-blue: #4e96e7; 
@panel: #FFFFFF; 
//@rowOdd: #EFF2F6; 
@rowOdd: lighten(@accent, 38%); 
@rowEven: #FFFFFF; 
@input-background: #e4e4e4; 
@button-grey: #c6c7c8; 

.button-template{ 
    height: 30px; 
    border: 2px solid #fff; 
    border-radius: 5px; 
    font-family: Roboto; 
    padding: 1px 8px; 
    cursor: pointer; 
    background-color: @accent; 
    color: #fff; 
    line-height: 25px; 

    &:hover{ 
     background-color: darken(@accent, 10%); 
    } 
    &:active{ 
     background-color: darken(@accent, 20%); 
    } 
    &:focus{ 
     outline: none; 
    } 
} 

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { 
    font-family: 'Roboto', sans-serif; 
    font-weight: 400; 
    margin: 0; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
} 

.wrapper{ 
    position: absolute; 
    left: 50%; 
    width: 1024px; 
    height: 768px; 
    transform: translate(-50%, 0); 
    overflow: hidden; 
    background-image: url(http://media.ca-a.com/MEDIA/OEM/NISSAN/GB/BG/NissanBG.png); 

    &:before{ 
     width: 100%; 
     height: 100%; 
     content: ' '; 
     position: absolute; 
     background-color: @background-blue; 
     top: 0; 
     left: 0; 
     z-index: -1; 
     opacity: 0.66; 
    } 

    .customerOffer{ 
     width: 100%; 
     background-color: gray; 
     position: absolute; 
     left: 200%; 
     top: 0px; 
     z-index: 1; 

     &:before{ 
      width: 100%; 
      height: 100%; 
      content: ' '; 
      position: absolute; 
      background-color: @background-blue; 
      top: 0; 
      left: 0; 
      z-index: -1; 
      opacity: 0.66; 
     } 

     .buttonHeader{ 
      margin-top: 10px; 
      margin-bottom: 10px; 
      position: relative; 

      .backButton{ 
       .button-template; 
       left: 20px; 
       position: relative; 
      } 
      .printButton{ 
       .button-template; 
       margin-right: 10px; 
       left: calc(~"89% - 20px"); 
       position: relative; 
      } 
     } 

     .panel{ 
      width: calc(~"100% - 40px"); 
      overflow: hidden; 
      border-radius: 10px; 
      position: relative; 
      margin-left: 20px; 
      margin-right: 20px; 
      margin-bottom: 20px; 

      .panelTitle{ 
       width: 100%; 
       height: 38px; 
       background-color: @accent; 

       .text{ 
        line-height: 38px; 
        font-size: 18px; 
        font-weight: 500; 
        color: #fff; 
        position: relative; 
        left: 30px; 
       } 
      } 

      .panelBox{ 
       height: auto; 
       width: 100%; 
       text-align: justify; 
       background-color: @panel; 
       border-radius: 0px 0px 10px 10px; 

       .column{ 
        padding-right: 0px; 
        height: 100%; 
        padding-left: 0px; 
        width: 50%; 
        vertical-align: top; 
        display: inline-block; 
        margin-top: 5px; 

        &.right{ 
         float: right; 
        }     
       } 

       .row{ 
        margin-bottom: 8px; 

        &:last-child{ 
         border-radius: 0px 0px 8px 8px; 
        } 

        &.coloured{ 
         margin-bottom: 0px; 
         padding: 4px 0px 4px 0px; 

         &:nth-child(odd){ 
          background-color: @rowOdd; 
         } 
         &:nth-child(even){ 
          background-color: @rowEven; 
         } 

         .label{ 
          width: auto; 
         } 

         .inputValueF{ 
          float: right; 
          margin-right: 10px; 

          &.b{ 
           font-weight: bold; 
          } 
         } 
        } 

        &.important{ 
         margin-bottom: 0px; 
         padding: 4px 0px 4px 0px; 
         background-color: @secondary; 

         .label{ 
          color: @panel; 
          width: auto; 
         } 

         .inputValueF{ 
          color: @panel; 
          float: right; 
          margin-right: 10px; 

          &.b{ 
           font-weight: bold; 
          } 
         } 
        } 

        .label{ 
         vertical-align: top; 
         display: inline-block; 
         width: 100px; 
         margin-left: 20px; 

         &.b{ 
          font-weight: bold; 
         } 
        } 

        .inputValueF{ 
         display: inline-block; 
        } 
       } 

       .separator{ 
        height: 2px; 
        background-color: #212121; 
        width: 98%; 
        margin-left: 1%; 
       }     
      } 
     } 
    } 
} 

@media print{ 

    div{ 
     page-break-inside: avoid; 
    } 

    .wrapper{ 
     overflow: visible; 
     width: 210mm; 
     height: 100%; 
     background-color: transparent; 
     background-image: none; 
     //-webkit-print-color-adjust: exact; 

     &:before{ 
      display: none; 
     } 

     .customerOffer{ 
      background-color: transparent; 
      background-image: none; 
      position: initial; 
      overflow: visible; 

      &:before{ 
       display: none; 
      } 

      .buttonHeader{ 
       display: none; 
      } 

      .panelTitle{ 
       //box-shadow: inset 0 0 0 1000px @accent; 
       border: 2px solid @accent 
      } 

      .panelBox{ 
       border: 2px solid @accent; 

       .row{ 
        &.coloured{ 

         &:nth-child(odd){ 
          box-shadow: inset 0 0 0 1000px @rowOdd; 
         } 
         &:nth-child(even){ 
          box-shadow: inset 0 0 0 1000px @rowEven; 
         } 
        } 

        &.important{ 
         box-shadow: inset 0 0 0 1000px @secondary; 

         .label{ 
          color: @panel; 
         } 

         .inputValueF{ 
          color: @panel; 
         } 
        } 


       } 
      } 
     } 
    } 
} 

このページをFirefoxで印刷すると、私は期待した結果を得ます。

ただし、Chromeで印刷すると、最初のページの一番下に幻影のpanelTitle要素が表示されます。私はpage-break-inside: avoid; CSSでこれを再現することができます。そうしないと、パネルの1つの中で印刷が中断されます。

このファンタム要素を削除する方法はありますか？

Answer 1

プロパティに@pageディレクティブを使用しているときに問題が発生することが判明しました。私は、問題が消えます5mm 0mm 0mm 0mmにマージンを削減した場合、私のCSSの一番下に

は私が

@page{ 
    size: auto; /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 5mm 0mm 5mm 0mm; 
} 

を持っていたが、これは明らかに他の問題を生成します。幸運にも、私がこれをテストしたプリンタは、ページの端から5mmは印刷されないので、ドキュメントを物理的に印刷するときには表示されません。

Answer 2

デフォルトのページマージンが異なっているように見えるし、要素間の間隔もfirefoxとchromeプリントの間で矛盾しているようだ。

おそらくpage-breakを使用して、新しいページが新しいページで開始され、2ページに分割されないようにします。