CSS删除线效应，Firefox问题 [英] CSS strikethrough effect, Firefox issue

问题描述

我试图使用这里描述的CSS删除线效果：

任何想法为何如此？

解决方案FF已知有一些奇怪的行为，元素内有绝对元素，显示 table-cell
$ p








$以下设置可能会完成这项工作（但可能会导致表单元格出现其他问题）： b

  .strikethrough 
 {
 display：inline-block; 
} 
  

jsFiddle Demo

I'm trying to use the CSS strikethrough effect described here: https://stackoverflow.com/a/14593540/62072 with a TD element, but it seems to go a bit wrong in 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>

Here is a JSFiddle to demonstrate: http://jsfiddle.net/Ms4Qy/

Any idea why this might be?

解决方案

FF is known to have some strange behaviors with absolute elements inside element with display of table-cell.

The following setting might do the work (but it might cause some other problems with the table cells):

.strikethrough
{
    display: inline-block;
}

jsFiddle Demo

这篇关于CSS删除线效应，Firefox问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！