mPDF 6.0自定义进度条问题

Question

我使用的是mpdf 6.0。

问题是当我将其作为10％

时

<div class="progressbar">
                        <div class="progressbar-value bg-color-green" style="width: 10%; overflow: hidden;"> &nbsp;10%</div>
                    </div>

结果如下：

当我加3％时，它覆盖整个宽度

<div class="progressbar">
                            <div class="progressbar-value bg-color-green" style="width: 3%; overflow: hidden;"> &nbsp;3%</div>
                        </div>

结果是：

请指导我解决这个问题。

PHP：

<?php
set_time_limit(600);
ini_set('display_errors', 'Off');
ini_set("memory_limit","256M");

require 'mpdf.php';


$mpdf = new \mPDF();



$html = "";

        $html .= <<<EOD
                    <div class="progressbar">
                        <div class="progressbar-value bg-color-green" style="width: 3%; overflow: hidden;"> &nbsp;11%</div>
                    </div>

EOD;

$stylesheet = file_get_contents('style.css');

$mpdf->WriteHTML($stylesheet,1);
$mpdf->WriteHTML($html, 2);

$mpdf->Output('','I');  


exit;
?>

CSS（style.css）：

.progress, .progress-bar, .progressbar {
    position: relative;
    display: block;
    background: rgba(0, 0, 0, .05);
    overflow: hidden;
    font-weight: bold;
    line-height: 20px;
    height: 20px;
    border-radius: 4px;
    color: white;
}
.progressbar-value {
    display: block;
    white-space: nowrap;
    overflow: hidden;
}
.text-left {
    text-align: left !important;
}
.bg-color-green {
    background-color: #61BD4F;
}

Answer 1

我使用background: linear-gradient() and background-size: x%

解决了上述问题

<div class="progressbar" style="float:left;">
  <div class="progressbar-value" style="background-image: linear-gradient(to left, #00FF00 100%); background-size:3%;float:left; height:15px;width:100%;">
    <div class="text" style="text-align: left; float: left;display:block;font-size:12px;height:15px;">3%</div>
  </div>
</div>

现在结果是