[FF] Strikethrough style works incorrectly for bigger fonts

[dariusz.czumaj]

Horizontal line that should be in the middle of text is at the bottom and looks like underline instead of strikethrough.

Way to reproduce:

1. input some text
2. change the font size of provided text to 72
3. choose 'strikethrough' option from toolbar

[Jakub Ś]

This is the code produced by CKEditor.

	<strike>
		<span style="font-size:72px;">
			This is some <strong>sample text</strong>. 
			You are using <a href="http://ckeditor.com/" data-cke-saved-href="http://ckeditor.com/">CKEditor</a>.
		</span>
	</strike>

This is the code produced by CKEditor in XHTML sample (more or less – I have replaced classes with styles)

<span style="text-decoration: line-through;">
	<span style="font-size:500%;">
		This is some <span class="Bold">sample text</span>. You are using <a href="http://ckeditor.com/" data-cke-saved-href="http://ckeditor.com/">CKEditor</a>.
	</span>
</span>

If you paste the above code into HTML page and open in a Firefox or Opera browser than you will see that effect is the same as in CKEditor – line at the bottom of the text.
This is how those two browsers see it.



The only question from me would be – is it possible to change the code produced by CKEditor from the above to the code presented below:

<span style="text-decoration: line-through; font-size:500%;">
	This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/" data-cke-saved-href="http://ckeditor.com/">CKEditor</a>.
</span>

This code displays strike-through line in the middle of the text in every browser.

Reproducible in Firefox and Opera from CKEditor 3.0.

[Teresa Monahan]

Note: This only occurs if you change the font size before applying the strike through. If you apply strike through and then change the font size this does not happen because the strike tag is included inside the span tag:

<span style="font-size:72px;"><strike>Sample text</strike></span>

[Satya Minnekanti]

Adding myself to cc

[Marek Lewandowski]

Replying to tmonahan:

Note: This only occurs if you change the font size before applying the strike through. If you apply strike through and then change the font size this does not happen because the strike tag is included inside the span tag:

AFAICS you can repro this issue in both cases, so the order does not matter.

The thing is that all browsers except FF will adjust strike through as the font size changes. It all happens behind the scenes.

[Jakub Ś]

@m.lewandowski from what I have checked @tmonahan might be right. When you use below code in contenteditable element, first two will display nicely, the other two with the strike line at the bottom of the text

//work
<p><span style="font-size:72px;"><strike>Sample text</strike></span></p>
<p>
<span style="text-decoration: line-through;font-size:500%;">
	Sample text
</span>
</p>

//don't work
<p><strike><span style="font-size:72px;">Sample text</span></strike></p>
<p>
<span style="text-decoration: line-through;">
	<span style="font-size:500%;">
		<span class="Bold">Sample text</span>
	</span>
</span>
</p>

If we could put strike inside the font-size span or we could put all styles into one span, then it would work.

[Jakub Ś]

#14920 was marked as duplicate.

#7788 is related to this one.