html - 当我尝试打印页面时，CSS 样式不适用于特定 div 中的跨度

Question

我有简单的html + css用于打印目的的页面。我有 2 列 <div class="col col-left">和 <div class="col col-right"> , 我有 <span class="tag">还。我的样式如下所示:

<style type="text/css" media="all">
    ...
    .col {
        float: left;
        height: 1754px;
    }

    .col-left {
        width: 340px;
        background: #3a4d63;
        -webkit-print-color-adjust: exact;
        color: #fff;
    }

    .col-right {
        width: 880px;
        padding: 30px 10px;
    }

    span.tag {
        background: #00cca1;
        color: #fff;
        padding: 5px;
        border-radius: 5px;
        display: -webkit-inline-box;
        margin-top: 4px;
    }
    ...
<style>

我的 html看起来像这样:

...
<div class="col col-left">
    <span class="tag">c#</span>
    <span class="tag">Javascript</span>
</div>
<div class="col col-right">
    <span class="tag">Angular</span>
    <span class="tag">TypeScript</span>
</div>
...

问题是当我尝试打印页面时，span.tag背景颜色只在.col-left里面但不在里面.col-right , 很奇怪哈？

有什么想法吗？

Answer 1

我解决了这个问题，将 -webkit-print-color-adjust: exact; 从 .col-left 移动到 .col