Reputation: 5918
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?
Upvotes: 5
Views: 1476
Reputation: 16777
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;
}
Upvotes: 2