4

デフォルトで印刷されない背景色の回避策として 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/

4

1 に答える 1

1

IE はie9+を除いてボックス シャドウをサポートしません

プレフィックスを指定-msすると、最新の IE バージョンで動作します

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

-ms-box-shadow: inset 0 0 0 1000px #F6BD0F;
于 2013-10-24T19:42:49.467 に答える