为什么IE9不应用此打印CSS样式规则?

时间:2015-11-14 20:27:27

标签: javascript css internet-explorer

function updatePatientRowHeight(patientsPerPage) {
    // first get the CSS rule
    // @media print { .patient-row { height: ... } }
    // This we will change based on the number of patients per row
    // I am just going to hardcode the total height to 9.75in for now
    // Maybe in the future we might target different paper sizes/orientations
    // In that case this would be need to changed
    var styles = document.styleSheets[0];
    var rules = styles.cssRules; // not available in some older IE browsers
    var printRules = false;
    if (rules) {
        // loop through the rules until we find a CSSMediaRule
        for (var i = 0; i < rules.length; i++) {
            if (rules[i] instanceof CSSMediaRule) {
                // now determine if it is @media print { }
                if (rules[i].cssText.match(/^@media print /)) {
                    printRules = rules[i].cssRules;
                    break;
                }
            }
        }
    }
    // if we found printRules above...
    if (printRules) {
        // loop through these rules looking for .patient-row rule
        for (var i = 0; i < printRules.length; i++) {
            if (printRules[i].selectorText == ".patient-row") {
                // we found it. now let's update the height, finally
                // let's calculate a new height in inches
                // The total height allowed for patient rows is going to be
                // hardcoded to 9.75ins for now
                var totalHeight = 9.75
                var heightPerRow = totalHeight / patientsPerPage;
                log(printRules[i].style.height);
                printRules[i].style.height = String(heightPerRow) + "in";
                break;
            }
        }
    }
}

我的CSS看起来像这样:

@media print {
    .patient-row { height: 0.61in; }
}

此代码在最新的Chrome中运行良好,IE9能够在设置时找到并记录正确的高度。但是,当我选择打印预览或打印IE9时不会应用新样式。相反,它采用默认值。

0 个答案:

没有答案