jQuery甜甜圈插件：箭头没有在印刷品上显示

Question

我试图使用这个jQuery插件在页面上显示百分比甜甜圈：

  

http://larentis.eu/donuts/

当我将代码添加到页面时，它完美运行，你可以看到一切正常：

但是当我进入打印预览时，我看不到指向甜甜圈上百分比值的箭头：

经过一番研究后，我看到了用于此插件的css，箭头上有 .donut-arrow 类，并且它具有以下相关样式：

/* 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来调整边框的大小，因为这样可以根据父类维护不同大小的箭头。