如何讓CSS僞元素看起來相同的跨瀏覽器？

這是我正在努力完成的一個非常基本的演示。如何讓CSS僞元素看起來相同的跨瀏覽器？

公開賽在谷歌瀏覽器：http://jsfiddle.net/8EbxG/4/

它應該看起來像有什麼也沒有，除了灰色矩形。

現在，在IE9或Firefox中打開。

你會看到一個空的白色矩形包含在較大的灰色的一個。

我需要做什麼才能讓這看起來像在鉻Chrome跨瀏覽器（我甚至沒有測試過舊的IE瀏覽器，或Opera或Safari）？

2012-10-18 vitaly87

看看這個http://stackoverflow.com/questions/9790000/before-and-after-pse-pudo-elements-on-html-tag -is-wonky-in-chrome – Afshin

@afshin：我認爲這是不同的。 – BoltClock

雖然這確實是Chrome的一個bug。理想的情況是讓Chrome像Firefox和IE9一樣工作......而不是相反。如果你不想讓白色盒子在那裏，然後刪除標題。 – BoltClock

添加此CSS：

#sb-caption:empty {display:none;}

來源

2012-10-18 06:27:54 manishie

我想你明白了！那是Firefox錯過的！ – vitaly87

刪除內容：「」;它會在所有的瀏覽器

來源

2012-10-18 06:26:15 premik91

你也可以完全刪除':: before'和':: after'規則。 – BoltClock

如果白盒中有文字，我需要填充。 – vitaly87

實際上，如果你刪除'content：「」'，那麼僞元素在大多數瀏覽器上都會完全中斷。 – vitaly87

使用十六進制顏色代碼，而不是RGBA代碼

#sb-caption{height:auto; font:12px/36px Arial, Helvetica, sans-serif; position:absolute; right:10px; bottom:10px; background:#ccc}

和利用空間「」或HTML

一些文本

<div id="sb-wrapper"> 
    <div id="sb-caption">&nbsp;</div> 
</div>

：D

來源

2012-10-18 06:35:56

爲什麼選擇十六進制顏色而不是RGBA顏色？ – BoltClock

ie8兼容性 –

我會測試出背景顏色。 – vitaly87

我最近記得IE需要爲假元素指定一個DOCTYPE才能工作。

所以，當一個DOCTYPE是enetered，框消失（在IE9，至少）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

而且，由於manishie的建議使用：

＃SB-標題：空{顯示：無;}

我敢肯定，這是火狐工作需要什麼。

注：我使用這個方法shadowbox.js創建一個標題<div>。
文本通過JavaScript送入<div id="#sb-caption"></div>，使用<a rev=""></a>

例：<a href="LINK" rev="YOUR CAPTION">

rev=""是你的標題文本會去。然後將進入<div>

這是一個令人費解的解決方案/黑客陰影盒的一小部分。

這裏是最後的版本：

對於鉻和火狐看到它在這裏：http://jsfiddle.net/FBwQd/
（它在IE無法正常工作，因爲JS-撥弄不承認DOCTYPE）

對於IE（和/或鉻）你可以在這裏看到它：http://cssdesk.com/Mrwh8

可以刪除的話「TEST」看到盒子完全消失！

來源

2012-10-18 18:28:06 vitaly87

我做了一些關於僞元素和僞類的更多閱讀。
我發現你也可以取代（方法1）：

.sb-caption:empty{display:none;}
.sb-caption:before{content:"";padding-left:50px;}
.sb-caption:after{content:"";padding-right:20px;}

與（方法2）：

.caption:empty{display:none;}
div[class="caption"]{padding-left:50px;padding-right:20px;}

這個，第二，方法顯然已被老版本的IE接受，但有一些不良結果。

在這兩種情況下，HTML保持不變：

<div>
<div class="sb-wrapper">
<div class="sb-caption">TEST</div>
</div>

如果刪除的話'TEST'，該#sbcaption DIV將同時消失案例。
測試在最新版本鉻，火狐，IE，並Safari瀏覽器的。

如果其他人有另一種黑客或其他方式達到相同的效果（但是更多的跨瀏覽器友好... IE7），請分享！

你可以看到這個測試頁面上這兩種效應：http://djpolbeeta.com/test-index.html
（臨時鏈接）

打開在任何瀏覽器。較深的矩形是CSS方法1，較亮的矩形是CSS方法2.

來源

2012-10-18 18:40:48 vitaly87

我做了更多的測試。現在100％肯定''.caption：empty {display：none;} div [class =「caption」] {padding-left：50px; padding-right：20px;}'是新瀏覽器的最佳解決方案。 – vitaly87

你也可以添加'＃sb-caption [type =「」] {visibility：hidden;}'雖然這不會幫助IE6 – vitaly87

如何讓CSS僞元素看起來相同的跨瀏覽器？

回答

相關問題