html2canvas 不能使用伪元素

Question

我正在尝试使用html2canvas 和ionicframework 截取屏幕截图。 html2canvas 以各种方式工作，除了那些我有:before 的类。比如

CSS

.e_amount::before{
    content: "$";
}

---

之前截图如下：

之后 html2canvas 代码：

---

注意到美元符号 ($) 与 10.00 不一致。

我已尝试将样式包含在头部中，但仍然无法正常工作。我错过了什么？

JS

html2canvas(document.getElementById('card'), {
    onrendered: function(canvas) {
        window.canvas2ImagePlugin.saveImageDataToLibrary(
            function(msg){
                console.log(msg);
                var message = {
                    text: "QR Generated",
                    image: "file://"+msg
                };
                window.socialmessage.send(message);
            },
            function(err){
                console.log(err);
            },
            canvas
        );
    }
});

html

<div class="list card" id="card">
    <div class="item item-body">
        <div class="row" style="margin-bottom: 5px;  border-bottom: 1px solid #ddd;">
            <style>.e_amount::before{content:'$' !important;}</style>
            <div class="col bold">{{"amount" | translate}}</div>
            <div class="col e_amount"></div>
        </div>
    </div>
</div>

Answer 1

重置类 .e_amount 的所有边距和填充，并将其 box-sizing 设置为border-box。