title: CSS box-shadow works in IE9+ but does not print?
body: <p>I was trying to use box-shadow as a workaround for background colors not printing by default ... looks like this workaround works in Chrome and Safari but not in IE8/9/10. Just wanted to confirm with others that this was the case. </p>
  
  <p>Here's the code:</p>
  
  <pre><code>@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;
      }
  
  }
  
  
  &lt;table cellspacing="1" cellpadding="10" id="fusioncolor"&gt;
  
                  &lt;tr style="cursor: pointer" onClick="showOpens(true)" onmouseover="style.backgroundColor='#E8F2FE'" onmouseout="style.backgroundColor=''"&gt;
                      &lt;td align="right" class="big fgGrey l6e"&gt;opened&lt;/td&gt;
                      &lt;td width="50px" class="big box gl8t bg1" id="id-opened" turntitle="Opens"&gt;&amp;nbsp;&lt;/td&gt;
                      &lt;td align="left" id="id-openedpct"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr style="cursor: pointer" onClick="showBounces()" onmouseover="style.backgroundColor='#E8F2FE'" onmouseout="style.backgroundColor=''"&gt;
                      &lt;td align="right" class="big fgGrey l6e"&gt;bounced&lt;/td&gt;
                      &lt;td class="big box gl8t bg2" id="id-bounced"    title="Bounces"&gt;&amp;nbsp;&lt;/td&gt;
                      &lt;td align="left" id="id-bouncedpct"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr style="cursor: pointer" onClick="showNoOpens()" onmouseover="style.backgroundColor='#E8F2FE'" onmouseout="style.backgroundColor=''"&gt;
                      &lt;td align="right" class="big fgGrey nobr l6e"&gt;did not open&lt;/td&gt;
                      &lt;td class="gl8t big box bg3" id="id-notopened"  title="No Opens / No Responses"&gt;&amp;nbsp;&lt;/td&gt;
                      &lt;td align="left" id="id-notopenedpct"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr style="cursor: pointer" onClick="clicksDrillDown('', $('id-clicked').innerHTML.replace(/,/g,''), true)" onmouseover="style.backgroundColor='#E8F2FE'" onmouseout="style.backgroundColor=''"&gt;
                      &lt;td align="right" class="big fgGrey l6e"&gt;clicked&lt;/td&gt;
                      &lt;td class="big box gl8t bg4" id="id-clicked"    title="Unique Clicks"&gt;&amp;nbsp;&lt;/td&gt;
                      &lt;td align="left" id="id-clickedpct"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
              &lt;/table&gt;
  </code></pre>
  
  <p>And here's a link to a JSFiddle without the CSS print media query: <a href="http://jsfiddle.net/RNKJN/" rel="nofollow">http://jsfiddle.net/RNKJN/</a></p>