CSS删除线效果，Firefox问题

Question

我试图使用这里描述的CSS删除线效果: https://dev59.com/DmUq5IYBdhLWcg3wT-6D#14593540 在一个TD元素中，但在Firefox中似乎有点问题。

Chrome:

Firefox:

CSS:

.strikethrough
{
    position: relative;
}

    .strikethrough:before
    {
        position: absolute;
        content: "";
        /*width: 170%;*/
        /*left: -35%;*/
        left: 0;
        top: 50%;
        right: 0;
        border-top: 1px solid #333333;
        /*border-color: inherit;*/
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }

HTML

<span class="strikethrough">
    Test
</span>
<table>
    <tr>
        <td class="strikethrough">
            5
        </td>
    </tr>
</table>

这里有一个JSFiddle演示：http://jsfiddle.net/Ms4Qy/。你知道为什么会出现这种情况吗？

- Tom Hunter

---

你应该解释 “a bit wrong” 是什么意思。 - Jukka K. Korpela

很好的观点@JukkaK.Korpela，我已经添加了一些截图，希望能够说明问题。 - Tom Hunter

Answer 1

众所周知，FF在具有table-cell显示属性的元素中使用绝对定位元素时会出现一些奇怪的行为。

以下设置可能可以解决问题（但可能会导致表格单元格出现其他问题）：

.strikethrough
{
    display: inline-block;
}

jsFiddle Demo

- Itay

---

谢谢@Itay。不幸的是，inline-block样式确实会导致表格单元格出现其他问题，所以我最终只是在表格单元格中放置了<span>元素，并将样式应用于它们。 - Tom Hunter

@TomHunter，你写的是这种情况下非常常见的解决方案（不幸的是）。 - Itay