Web A4 kağıdı taklit ve tarayıcı (özellikle Krom) Haritayı Bu sayfa yazdırmak için izin istiyorum. 21cm x 29.7 için öğenin boyutunu cm, baskı (veya Baskı Önizleme) gönderdiğim zaman benim sayfa klibi.

Bu 25* *bakın!

HTML

<div class="book">
    <div class="page">
        <div class="subpage">Page 1/2</div>    
    </div>
    <div class="page">
        <div class="subpage">Page 2/2</div>    
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font: 12pt "Tahoma";
}
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.page {
    width: 21cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px red solid;
    height: 256mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}
@media print {
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}

Bir şey unuttuğumu düşünüyorum. Ama bu ne olurdu?

• Kromsayfa kırpma, çift sayfa (sadece bu iş için ihtiyacım olan şey)
• Firefox: işe yarıyor mu?
• IE10: ister inanın ister inanmayın, bu mükemmel!
• Opera: Baskı Önizleme üzerinde çok adamcağız

Sayfa initial atama ile bu gerçek bir sorun gibi görünüyor biraz daha baktım print medya yönetimi altında width. Krom .page eleman width: initial sonuçlar gibi görünüyorÖlçeklemeSayfa İçeriği belirli bir uzunluk değeri tanımlanır width herhangi bir ana unsurlar (width: initial Bu durumda giderir width: auto ... ama aslında hiçbir değeri daha küçük boyutta tanımlanan altında @page kural neden aynı sorun).

Bu yüzden sadece içeriği değilçok uzunsayfa (hakkında2cmama aynı zaman da sayfa doldurma ilk biraz daha fazla olacak2cmve bu yüzden genişliği width: auto altında içeriğini işlemek gibi görünüyor~196mmve sonra tüm içerik genişliği kadar ölçek210mm~ ama garip bir şekilde tam olarak aynı Ölçekleme herhangi genişliğinden daha küçük olan içeriği için uygulanır210mm).

Bu sorunu düzeltmek için yapabilirsiniz sadece print medya kural atama A4 kağıt genişliği ve yüksekliği için html, body veya doğrudan .page ve bu durumda önlemek initial anahtar kelime.

DEMO

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}

^{Bu her şey orijinal CSS olduğu gibi kalsın ve Krom (Krom farklı sürümleri Windows altında, X ve Ubuntu OS test) sorunu çözmek gibi görünüyor.}