Question

我得到了一些看起来像这样的html（我无法控制html）：

<p>Some text</p>
<strike>
  <p>This is some text</p>
</strike>
<p>More text</p>

文字在IE和Chrome中显示为三振出局，但在Firefox中则不然。我已将display:inline-block添加到<p>标记中，该标记修复了Firefox，但随后破坏了IE和Chrome。

是否有解决方案可以在所有三种浏览器中使用，而不涉及更改html？

Answer 1

我认为您的问题是由于在block元素（<p>）中嵌套inline元素（<strike>）。

这个CSS让line-through在嵌套<p>：

中工作

strike p {  /* only applies to <p> tags that are children of a <strike> tag */
    padding: 0;                     // remove default spacing from <p> tag
    text-decoration: line-through;  // fixes missing line-through
}

注意：仅在Firefox 3.6.x中测试

Answer 2

使用CSS。

根据您的特定HTML示例量身定制：

strike p
{
 text-decoration: line-through;   
}

JSFiddle（已验证可在IE9，Chrome 10，FF4中使用）：http://jsfiddle.net/hcYVv/1/

Answer 3

该标记不受普遍支持。使用以下CSS

.strikethrough { text-decoration: line-through;}

然后相应地将你的html改为

<p class="strikethrough">This is some text</p>

firefox与ie / chrome中的Strike标记问题

3 个答案: