印刷プレビューsquishingコンテンツ

Question

私はCSSの@pageディレクティブを使用する方法で私のために印刷するために印刷プレビューを取得しようとしています。何らかの理由で、私のページの余白がどのように設定されていても、数字が間違いなく正確であっても、コンテンツは盛り上がってしまいます。ここではテストの例です：

https://deck.zone/embed/-KK43Q9JoAqMIYd5gLj5;scriptId=0;print;tabs=result,code

あなたは（私はクロームでテストしています）このページの印刷プレビューを開く場合は、カードが中心から外れて乱暴されていることがわかります。ここでは、私のカードは3.5inで2.5inに設定され、ページ自体は8.5inで11inに設定されています。これは、左右にマージンが約1インチ、上下にマージンが0.5インチ必要であることを意味します。論理的には、マージンは両側で半分にする必要があります。私は実際にそれを行う場合は、それを踏み付けになります。これで私は手動で余白を設定しようとすると

は

@media print { 
    html, body, .printable, .results-pane, .embed-view { 
     width: 8.5in !important; 
     height: 11in !important; 
    } 

    @page { 
     size: 8.5in 11in; 
     margin-top: 0.25in; 
     margin-left: 0.5in; 
     margin-right: 0.5in; 
     margin-bottom: 0.25in; 
    } 
    } 

問題も存在し、そして：

は、ここに私の@pageのCSSです私のコンテンツが押しつぶされているのを見ることさえできます。

そして、ここでは、私は余白を自分で設定したときに、それがどのように見えるかです：：ここでは、それは絶対にありませんマージン（可能な1インチと0.5インチの余白を残してどのように見えるかだ

があります私はどちらかのブラウザのこのsquishingの動作をしないようにするか、またはこれを修正するために私の@printクエリを使用することができます参照のために、私はボディ自体に余白を設定しようとしましたが、上下のマージンは、印刷ページ。

Answer 1

運にそれがあるので、これは実際には最初のメディアクエリーに問題がある：これらはすべてされているため

html, body, .printable, .results-pane, .embed-view { 
    width: 8.5in !important; 
    height: 11in !important; 
} 

同じサイズに設定されている場合、彼らはお互いを押し出す。解像度はhtmlを正しい幅/高さにして、すべてのソートがそこから落ちたということでした。

Answer 2

余分な接尾記号があなたのCSSを壊している可能性はありますか？

@page { 
    size: 8.5in 11in; 
    margin-top: 0.25in; 
    margin-left: 0.5in; 
    margin-right: 0.5in; 
    margin-bottom: 0.25in; 
} 

}/* < - 余分なブラケット*/