：在table-cell元素上具有position绝对值的元素之前是相对于文本节点而不是容器

Question

我正在使用Cordova创建一个Android项目，我使用了很多表。

我有一个display: table-cell和position: relative的div，它遵循通常的表格结构。

单元格的数字应该以+或 - 符号开头，我试图用:before伪元素position: absolute和负margin显示。符号取决于单元格的数据属性。一切都运作良好。

当我在浏览器上测试时，:before元素将自身定位于文本节点，而不是单元容器。我实际上想要这个，但是当我在我的Xperia SP上通过cordova使用它时它不起作用。在这种情况下，它相对于单元本身定位，而不是其文本（这似乎更有意义），但因此与其他单元格对齐。为什么会这样呢？

HTML（仅限重要部分）：

<div class="table skill-list">
    <div class="table-row skill">
        <div class="table-cell table-amount skill-bon" data-amount="0">0</div>
    </div>
    <div class="table-row skill">
        <div class="table-cell table-amount skill-bon" data-amount="200">200</div>
    </div>
    <div class="table-row skill">
        <div class="table-cell table-amount skill-bon" data-amount="15">15</div>
    </div>
</div>

CSS：

.table > .table-row > .table-cell.table-amount {
    position: relative;
}

.table > .table-row > .table-cell.table-amount:before {
    content: "+";
    position: absolute;
    margin-left: -20px;
    font-size: smaller;
    margin-top: 4px;
}

.table > .table-row > .table-cell.table-amount[data-amount^="-"]:before {
    content: "-";
    margin-left: -15px;
    font-size: inherit;
    margin-top: -2px;
}

Chrome上的结果：

（我想要的）

移动设备的结果：

（Xperia SP，来自cordova）