Internet Explorer 8 不會在列印樣式表中修改 HTML5 標籤

在進行列印樣式表時，您需要各種 HTML5 標籤，如 <nav>、<article>、<div>、<section> 等，這些標籤用於為要列印的網頁提供不同的佈局選項。

Chrome、Firefox 和 Internet Explorer 9 允許使用者在其瀏覽器中使用這些 HTML5 標籤。但是，Internet Explorer 6-8、Safari 4x 和其他此類舊版瀏覽器不支援這些標籤，因此我們無法在網頁中應用這些佈局選項。

那麼，如何在 Internet Explorer 8 中使用這些 HTML5 標籤呢？為此，您可以使用html5.shiv。

首先讓我們瞭解一下列印樣式表。

什麼是列印樣式表？

樣式表是一組程式碼，它告訴瀏覽器網頁的外觀，例如大小、字型、佈局、縮排、間距等。

列印樣式表用於以組織的方式格式化要列印到紙張上的網頁。
在 CSS 中，我們有@media print 用於格式化要列印的頁面。

示例

@media print {
   body {font-size: 12pt};
   header {display: none};
   footer {display: none};
   margin: 2cm;
   width: 100%;
}

如何建立列印 CSS？

在為要列印的頁面設定樣式時，您應該牢記以下幾點：

定義邊框和字型大小

首先，您應該向頁面新增邊距。

示例

<img src = “example.jpg” onload = “load()” width= “220” height= “300”>
page {
   width: 100%;
   margin: 3cm;
}

突出顯示連結

由於無法在紙上單擊連結，因此您應該突出顯示它。

示例

a: link {
   background: transparent;
   font-color: blue;
   text- decoration: underline;
}

隱藏影片和音訊

由於無法在紙上顯示影片和音訊，因此頁面上會出現不合適的空白。因此，您應該隱藏影片和音訊。

示例

.video {
   display: none;
   width: 0 !important;
   height: 0 !important;
   overflow: hidden !important;
}

注意 − !important 是 CSS 的一個規則，它為屬性賦予更高的重要性。如果您使用!important

規則，則它會覆蓋該元素上該屬性的所有先前樣式程式碼。

隱藏其他不必要的元素

網頁的許多區域不需要列印。因此，您應該隱藏這些區域。這可以透過使用 display: none 來完成。

示例

nav, button {
   display: none;
}

html5shiv & printshiv 用於基本樣式

讓我們瞭解 htmlshiv & printshiv 如何對樣式表起作用。

html5shiv

html5shiv 是 Internet Explorer 6 – 8、Safari 4.x 和 Firefox 3.x 的 Javascript shim，它使這些瀏覽器能夠支援新的 HTML5 樣式元素。

它用於為上述瀏覽器使用 document.createElement 建立元素。它具有 print.shiv，它使 HTML5 元素能夠在 IE 6-9 中列印時進行格式化。

注意

  • 它位於 <head> 標籤內

  • 它寫在 <script> 標籤下，因為它是一個 Javascript shim

示例

<html>
<head>
   <title> Print stylesheet example </title>
   <script src = “/js/html5.shiv.js>
   </script>
</head>
<body>
<section>
     <h2> This is an example </h2>
     <p> text to be entered in the section </p>
<section>
</body>
</html>

printshiv

htmlshiv-printshiv.js 是一段程式碼，它使要列印到低於 9 版本的 Internet Explorer 中的網頁中的 HTML5 元素能夠進行樣式設定。

示例

<head>
   < script src = “/js/html5shiv-printshiv.js”> </script>
</head>

替代方法

您還可以使用onbeforeprint 和onafterprint 事件來實現此目的。

onbeforeprint 事件在頁面即將列印時發生，即在列印對話框出現之前。

onafterprint 事件在頁面正在列印過程中發生，即列印對話方塊關閉之後。

語法

In HTML, < element onbeforeprint = “yourCode”>
In Javascript, object.onbeforeprint = function() { code} ;

示例

假設您想在列印網頁之前隱藏網頁中存在的影片，則可以編寫以下程式碼：

<body>
<video onbeforeprint = “example”> </video>
<script>
function example() {
   document.getElementById( “video”).style.display = “none”;
}
</script>
</body>

結論

儘管 Internet Explorer、Firefox 和 Safari 的更新版本確實具有各種功能，這些功能使使用者能夠為要列印的頁面設定樣式，但以前的版本（如 Internet Explorer 6-9、Safari 4x 等）不支援此類 HTML5 元素來格式化頁面。為了使瀏覽器讀取這些程式碼，您可以使用html5.shiv 和 Javascript 的onbeforeprint 事件。

更新於： 2022 年 10 月 12 日

198 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告