Question

我正在制作一组显示一些棒球运动员统计数据的牌。它们以4列布局相互浮动。卡内的一些行的背景颜色为#EEEEEE。查看输出时，卡片显示正常，但是当我打印它们时，打印预览和后续打印到PDF（CutePDF Writer）选项都无法渲染包含上述背景颜色的任何行的边框。

我通过删除背景颜色并再次出现遗失的边界来证实这一点。这是我的傻瓜：

https://jsfiddle.net/q2pczg5h/

这是有问题的CSS：

.clear-fix {
    clear:both;
}


/* CARD STYLES */
#card-container {
    width:705px; 
}

.card-group, .new-page{
    border-right:1px solid black;
    border-bottom:1px solid black;
}

.card *
{
    font-family:arial;
}

.card {
    border-left:1px solid black;
    border-top:1px solid black;

    width:175px;
    float:left;
}
.first-name {
    font-size:10pt;
    display:inline;
    font-weight:bold;
}
.last-name {
    display:inline;
    font-weight:bold;
    font-size:10pt;
}
.team-name {
    padding:5px 0px 5px 0px;
    font-size:8pt;
    text-align:center;
}

.player-name {
    text-align:center;
    background:#EEEEEE;
    padding:5px 0px 5px 0px;
    font-size:12pt;
    overflow:hidden;
}

.position {
    font-size:8pt;
    text-align:center;
}
.bats {
    float:right;
    font-size:8pt;
}
.card-row {
    padding:5px;
}

.header .column {
    font-weight:bold;
    width:25%;
    text-align:center;
    float:left;
    font-size:8pt;
    padding:5px 0 5px 0;
    background-color:#EEEEEE;
}

.data .column {
    width:25%;
    text-align:center;
    float:left;
    font-size:8pt;
    padding:5px 0 10px 0;
}

.advanced-hitting {
    padding:10px 0px 5px 0px;
}

运行后，尝试打印，然后您就会看到我所描述的行为。

我曾尝试搞乱浮动，改变背景颜色，不同的边框组合，甚至＆＃34;溢出：隐藏＆＃34;如另一篇SO帖子所述。我确信这很简单，但我尝试过的任何东西似乎都没有渲染这些边界。代码有什么问题？

背景颜色隐藏边框

0 个答案: