Question

我试图使用box-shadow作为默认打印背景颜色的解决方法......看起来这种解决方法适用于Chrome和Safari，但不适用于IE8 / 9/10。只是想与其他人确认是这种情况。

以下是代码：

@media print {

    #fusioncolor {
        background-color: transparent;
        -webkit-print-color-adjust: exact;
    }

    #fusioncolor .bg1 {
        box-shadow: inset 0 0 0 1000px #AFD8F8;
    }

    #fusioncolor .bg2 {
        box-shadow: inset 0 0 0 1000px #F6BD0F;
    }

    #fusioncolor .bg3 {
        box-shadow: inset 0 0 0 1000px #8BBA00;
    }

    #fusioncolor .bg4 {
        box-shadow: inset 0 0 0 1000px #FF8E46;
    }

}


<table cellspacing="1" cellpadding="10" id="fusioncolor">

                <tr style="cursor: pointer" onClick="showOpens(true)" onmouseover="style.backgroundColor='#E8F2FE'" onmouseout="style.backgroundColor=''">
                    <td align="right" class="big fgGrey l6e">opened</td>
                    <td width="50px" class="big box gl8t bg1" id="id-opened" turntitle="Opens">&nbsp;</td>
                    <td align="left" id="id-openedpct"></td>
                </tr>
                <tr style="cursor: pointer" onClick="showBounces()" onmouseover="style.backgroundColor='#E8F2FE'" onmouseout="style.backgroundColor=''">
                    <td align="right" class="big fgGrey l6e">bounced</td>
                    <td class="big box gl8t bg2" id="id-bounced"    title="Bounces">&nbsp;</td>
                    <td align="left" id="id-bouncedpct"></td>
                </tr>
                <tr style="cursor: pointer" onClick="showNoOpens()" onmouseover="style.backgroundColor='#E8F2FE'" onmouseout="style.backgroundColor=''">
                    <td align="right" class="big fgGrey nobr l6e">did not open</td>
                    <td class="gl8t big box bg3" id="id-notopened"  title="No Opens / No Responses">&nbsp;</td>
                    <td align="left" id="id-notopenedpct"></td>
                </tr>
                <tr style="cursor: pointer" onClick="clicksDrillDown('', $('id-clicked').innerHTML.replace(/,/g,''), true)" onmouseover="style.backgroundColor='#E8F2FE'" onmouseout="style.backgroundColor=''">
                    <td align="right" class="big fgGrey l6e">clicked</td>
                    <td class="big box gl8t bg4" id="id-clicked"    title="Unique Clicks">&nbsp;</td>
                    <td align="left" id="id-clickedpct"></td>
                </tr>

            </table>

这是一个没有CSS打印媒体查询的JSFiddle链接：http://jsfiddle.net/RNKJN/

Answer 1

除了 ie9 +

，IE不支持框阴影

如果您给出前缀-ms，它可以在最新的IE版本中使用

box-shadow: inset 0 0 0 1000px #F6BD0F;

-ms-box-shadow: inset 0 0 0 1000px #F6BD0F;

CSS box-shadow在IE9 +中工作但不打印？

1 个答案: