2011-03-23 52 views
1

我一直在考慮一些HTML看起來像這樣的(我有過HTML無法控制):打擊標籤問題與IE /鉻

<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?

回答

3

我相信你的問題是由於一個嵌套元素inline<strike>)的內部block元素(<p>)。

這個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的

+0

+1爲解決原因。 「罷工」似乎在FF自己正常工作。 – Sapph 2011-03-23 17:33:20

+0

謝謝!有時候我只需要一個大笨蛋:) – Wavel 2011-03-23 17:41:35

-1

該標籤沒有得到普遍支持。使用下面的CSS

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

,然後相應地改變你的HTML

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

我有過HTML無法控制,所以我不能添加這些段落標籤的類。我想我可以做一個風格雖然...... – Wavel 2011-03-23 17:29:31

2

使用CSS測試。

根據您的具體HTML例如:

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

的jsfiddle(驗證了IE9,Chrome瀏覽器10,FF4工作):http://jsfiddle.net/hcYVv/1/

+0

+1用於驗證其他瀏覽器 – drudge 2011-03-23 17:35:35