CSS删除线效果，Firefox问题答案

【问题标题】：CSS strikethrough effect, Firefox issueCSS删除线效果，Firefox问题
【发布时间】：2013-09-27 12:14:26
【问题描述】：

我正在尝试使用此处描述的 CSS 删除线效果：https://stackoverflow.com/a/14593540/62072 与 TD 元素，但在 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/

知道为什么会这样吗？

【问题讨论】：

你应该解释一下“有点不对”是什么意思。
公平点@JukkaK.Korpela，我添加了一些屏幕截图，希望能说明问题。

标签： html css firefox

【解决方案1】：

众所周知，FF 有一些奇怪的行为，其中绝对元素在元素内，显示为 table-cell。

以下设置可能会起作用（但它可能会导致表格单元格出现其他一些问题）：

.strikethrough
{
    display: inline-block;
}

jsFiddle Demo

【讨论】：

谢谢@Itay。不幸的是，inline-block 样式确实导致了表格单元格的其他问题，所以我最终只是将 <span> 元素放在表格单元格中并将样式应用于它们。
@TomHunter 你所写的是这种情况下非常常见的解决方案（不幸的是）。