的jQuery插件甜甜圈：箭头不显示在打印

Question

我试图用这个jQuery插件显示在页面上percentaje甜甜圈：

http://larentis.eu/donuts/

当我把代码添加到页面，它完美的作品，你可以看到一切正常：

但是当我去打印预览我没有看到指着甜甜圈的百分比值箭头：

一个小小的研究后，我看到了使用这个插件的CSS和箭头有类.donut箭头和它相关的下列风格：

/* line 38, ../sass/donuts.scss */ 
.donut .donut-arrow { 
    height: 1em; 
    width: .1em; 
    margin-left: -.05em; 
    -webkit-transform-origin: 50% 100%; 
    -moz-transform-origin: 50% 100%; 
    -ms-transform-origin: 50% 100%; 
    -o-transform-origin: 50% 100%; 
    transform-origin: 50% 100%; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    transition: all 0.5s; 
} 
/* line 49, ../sass/donuts.scss */ 
.donut .donut-arrow, .donut .donut-arrow:before { 
    position: absolute; 
    display: inline-block; 
    background: #333; 
    left: 50%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
/* line 57, ../sass/donuts.scss */ 
.donut .donut-arrow:before { 
    content: ''; 
    height: .2em; 
    width: .2em; 
    bottom: -.1em; 
    margin-left: -.1em; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    -ms-borderradius: 100%; 
    -o-border-radius: 100%; 
    border-radius: 100%; 
}  

在打印页面时，我应该添加什么css样式来查看此箭头？

任何想法？非常感谢你！

更新：我在这里补充的jsfiddle：http://jsfiddle.net/KRcMg/

Answer 1

箭头本身就是一个div具有背景色：打印时

.donut .donut-arrow, .donut .donut-arrow:before { 
    background: #333; 
} 

背景将不会显示。因此，您最好的选择可能是尝试使用相同的标记重新创建箭头，使用边框代替背景颜色。

喜欢的东西：

.donut-arrow { 
    width: 0; 
    border: .05em solid #000; 
} 

你会使用em的希望大小的边界，因为这将让你根据父类保持箭头的大小不同。