printing iframe doesn't include CSS

Question

I have an iframe, which includes <button onclick="print()">print</button>

var print = function(){
    parent.window.focus();
    window.print();
}

When I click on <button>, printing starts, but CSS is not included into printing. How can I force browser to include my CSS into printing?

Answer 1

iframe内页面的CSS必须具有必要的print CSS media query才能进行打印，如在当前浏览器中显示的那样。

即

@media print {
    #my-element {
        color: red;
        /* all the styles you need */
    }
}