Bagaimanakah Saya Boleh Mengawal Tetapan Cetakan Penyemak Imbas (Margin, Pengepala, Pengaki) Menggunakan CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Mengawal Tetapan Cetakan Penyemak Imbas (Margin, Pengepala, Pengaki) Menggunakan CSS?

Linda Hamilton

Lepaskan： 2024-12-30 06:21:10

asal

339 orang telah melayarinya

How Can I Control Browser Print Settings (Margins, Headers, Footers) Using CSS?

Mengubah Tetapan Cetakan Penyemak Imbas (Margin, Pengepala, Pengaki)

Banyak percubaan telah dibuat untuk menangani topik mengubah suai tetapan cetakan penyemak imbas, tetapi kejelasan muktamad masih sukar difahami. Artikel ini menyediakan penjelasan komprehensif dan contoh kod berdasarkan piawaian CSS terkini.

Penyesuaian dengan @page Directive

CSS menawarkan arahan @page, membenarkan pengubahsuaian pemformatan khusus halaman untuk dicetak media. Dengan menggunakan arahan ini, pembangun boleh menentukan margin pencetak, orientasi halaman dan tetapan lain.

Menetapkan Margin Pencetak

Untuk menetapkan margin pencetak, gunakan sifat margin dalam arahan @page. Sifat ini mengambil nilai dalam milimeter dan mempengaruhi tetapan margin dalam panel pilihan pencetak.

Nota: Tingkah laku penyemak imbas untuk sifat @page boleh berbeza-beza. Contohnya, Safari tidak menyokong tetapan jidar, manakala penyemak imbas utama lain menyokongnya.

Untuk mengalih keluar pengepala dan pengaki menggunakan @halaman, tetapkan jidar seperti berikut:

@page {
    margin: 0mm;
}

Salin selepas log masuk

Teknik ini mungkin tidak berkesan jika kandungan bercetak anda merangkumi berbilang halaman kerana margin khusus penyemak imbas dilumpuhkan.

Khusus Penyemak Imbas Gelagat

Pelayar yang berbeza mempamerkan tingkah laku yang berbeza apabila mengendalikan arahan @halaman. Berikut ialah pecahan:

Firefox 3.6 dan ke bawah: @ jidar halaman diabaikan.
IE 7 dan ke bawah: @ jidar halaman diabaikan.
Safari 5.1.7: jidar @halaman tidak disokong.
Chrome 4.1: jidar @halaman diabaikan.
IE 8: margin @halaman dihormati, tetapi pengepala dan pengaki penyemak imbas tidak tersembunyi.
Opera 10: @ jidar halaman tidak dihormati, tetapi pengepala dan pengaki penyemak imbas disembunyikan jika latar belakang tidak telus.
Chrome 21 dan ke atas: jidar @halaman dihormati dan pengepala dan pengaki penyemak imbas disembunyikan jika jidar bertindih dengan kandungan.

Kod Contoh

Kod HTML dan CSS berikut menunjukkan cara untuk menyesuaikan tetapan cetakan dengan arahan @halaman.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;
        margin: 0mm;
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm;
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Salin selepas log masuk

Nota: Kod ini menyembunyikan pengepala dan pengaki penyemak imbas dalam Chrome tetapi tidak dalam penyemak imbas lain.

Penghadan dan Pertimbangan

Menukar tetapan cetakan penyemak imbas secara dinamik mungkin tidak disokong secara konsisten merentas semua penyemak imbas. Sesetengah penyemak imbas mungkin mengatasi tetapan tersuai, atau hasilnya mungkin berbeza-beza bergantung pada pencetak tertentu yang digunakan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengawal Tetapan Cetakan Penyemak Imbas (Margin, Pengepala, Pengaki) Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!