當我嘗試打印頁面時，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;解決了這個問題-webkit-print-color-adjust: exact; 從.col-left到.col