Я пытался использовать этот плагин jQuery, чтобы показать процентный пончик на странице:
Когда я добавляю код на страницу, он отлично работает, и вы можете видеть, что все в порядке:
Но когда я перехожу к просмотру печати, я не вижу стрелки, указывающей процентное значение на пончике:
После небольшого исследования я увидел, что 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/
Сама стрелка представляет собой div
с фоном:
.donut .donut-arrow, .donut .donut-arrow:before {
background: #333;
}
При печати фоны не отображаются. Таким образом, ваш лучший выбор, вероятно, будет заключаться в попытке воссоздать стрелку с той же разметкой, используя границы вместо цвета фона.
Что-то вроде:
.donut-arrow {
width: 0;
border: .05em solid #000;
}
Вы хотите, чтобы размер границ использовался с помощью em
, так как это позволит вам поддерживать разные размеры стрелок в соответствии с родительским классом.