4

我正在尝试使用此处描述的 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/

知道为什么会这样吗?

4

1 回答 1

2

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

以下设置可能会起作用(但可能会导致表格单元格出现其他一些问题):

.strikethrough
{
    display: inline-block;
}

jsFiddle 演示

于 2013-09-22T14:49:26.660 回答