的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的希望大小的邊界，因爲這將讓你根據父類保持箭頭的大小不同。