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> 标签内
因为它是一个 Javascript shim,所以它写在 <script> 标签下
示例
<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 元素来格式化页面。为了使浏览器读取这些代码,您可以使用 Javascript 的 **html5.shiv** 和 **onbeforeprint** 事件。
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP