Question

IE似乎是唯一支持页边距框的Web浏览器（参见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;
}

}

Answer 1

在Javascript中，cssRules集合包含样式表的CSS规则，CSSPageRule对象表示@page规则。在版本5之前，cssRules集合不包含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>

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

1 个答案: