CSS @page 规则：如何在 Internet Explorer 中预览答案

【问题标题】：CSS @page rule: How to preview in Internet ExplorerCSS @page 规则：如何在 Internet Explorer 中预览
【发布时间】：2015-02-18 10:47:00
【问题描述】：

IE 似乎是唯一支持页边距框的网络浏览器（请参阅here）。我已经用 WeasyPrint 测试了我的 CSS，它似乎工作正常。我的问题是：我如何真正看到在 IE 中应用的 @page 规则？我目前使用 IE11。我可以看到在打印预览上应用了@media 打印规则，但是似乎没有应用@page 规则（而且我没有将@page 规则嵌套在@media 打印规则中）。有人可以解释一下如何启动应用了@page 规则的打印预览吗？

这是我的页面规则的样子：

@page {

size: A4 portrait;
margin: 1.5cm 1.5cm 1.5cm 1.5cm; 

@top-left-corner {
    content: ""; /* has to be specified! */
    background-color: rgba(42, 201, 80, 0.220);
    border-bottom: solid green; 
}

@top-left {
    width: 70%;
    content: "";
    background: url('images/logo_v4.png'), rgba(42, 201, 80, 0.220);
    background-repeat: no-repeat, repeat;
    background-position: left center, left;
    background-size: contain; /* 5cm, cover or 100%: scale bg image, retains img ratio */ 
    border-bottom: solid green;
} 

@top-right {
    width: 30%;
    content: "Page " counter(page) " of " counter(pages);
    vertical-align: middle; 
    font-family: sans-serif;
    font-weight: bold;
    font-size: 0.7cm;
    color: white;
    text-align: center;
    background-color: #53c963;
    border-bottom: solid green;
    }

@top-right-corner { 
    content: " "; 
    background-color: rgba(42, 201, 80, 0.220);
    /* background-color: #79caff; */
    border-bottom: solid green; 
}

@bottom-center {
    width: 100%;
    content: "Reporting Powered by Open Source Software";
    vertical-align: middle; 
    font-family: sans-serif;
    font-weight: bold;
    font-size: 0.7cm;
    color: green;
}

}

【问题讨论】：

IE 已被 Edge 取代。 @page 规则似乎在那里起作用。

标签： html css internet-explorer printing

【解决方案1】：

在 Javascript 中，cssRules 集合包含样式表的 CSS 规则，CSSPageRule 对象代表@page 规则。 cssRules 集合在版本 5 之前的 Firefox 和 Safari 中不包含 @page 规则，并且在版本 9 之前的 Internet Explorer 中不支持它。如果要在旧 Internet Explorer 版本中获取 @page 规则，请使用 pages 集合。在 Firefox 和旧版本的 Safari 中无法访问 @page 规则。

   <head>
    <style id="myStyle">
        @page :first {
            margin-left: 13cm;
            margin-right: 4cm;
        }
    </style> 

    <script type="text/javascript">
        function GetPageRule () {
            var styleTag = document.getElementById ("myStyle");

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

            if (sheet.cssRules) { // all browsers, except IE before version 9
                    // the page rules are not in the cssRules collection
                    // in Firefox and Safari before version 5
                if (sheet.cssRules.length > 0) {
                    var pageRule = sheet.cssRules[0];
                    alert (pageRule.cssText);
                    return;
                }
            }
            else {  // Internet Explorer before version 9
                if (sheet.pages) {
                    var pageRule = sheet.pages[0];
                    alert (pageRule.selector + ":" + pageRule.pseudoClass);
                    return;
                }
            }

                // Firefox, Safari before version 5
            alert ("Your browser does not support this example!");
        }
    </script> 
</head>
<body>
    <button onclick="GetPageRule ()">Get the page rule!</button>
</body>

【讨论】：

这很有趣，谢谢，但它没有回答我的问题。我在页面规则上方添加。