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

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

IE 不支持框阴影，ie9+

除外

如果你给前缀 -ms 它可以在最新的 IE 版本中工作

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

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