如何让 CSS 伪元素看起来与跨浏览器相同？答案

【问题标题】：How to get CSS pseudo-elements to look the same cross browser?如何让 CSS 伪元素看起来与跨浏览器相同？
【发布时间】：2012-10-08 11:50:20
【问题描述】：

这是我想要完成的一个非常基本的演示。

在 Google Chrome 中打开：http://jsfiddle.net/8EbxG/4/

它应该看起来除了一个灰色矩形之外什么都没有。

现在，在 IE9 或 Firefox 中打开。

您将看到一个空白矩形包含在较大的灰色矩形中。

我需要做什么才能让它看起来像它在 chrome Chrome 跨浏览器中的效果（我什至没有测试过旧的 IE、Opera 或 Safari）？

【问题讨论】：

看看这个stackoverflow.com/questions/9790000/…
@afshin：我认为这不一样。
不过，这绝对是一个 Chrome 错误。理想的情况是让 Chrome 像 Firefox 和 IE9 一样工作……而不是相反。如果您不希望出现白框，请删除标题。

标签： css css-selectors attr pseudo-element pseudo-class

【解决方案1】：

我阅读了更多关于伪元素和伪类的内容。
我发现你也可以替换（方法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 在这两种情况下都会消失。
在 Chrome、Firefox、IE 和 Safari 的最新版本中进行了测试。

如果其他人有其他 hack 或其他实现相同效果的方法（但对跨浏览器更友好...... IE7），请分享！

您可以在此测试页面上看到这两种效果：http://djpolbeeta.com/test-index.html
（临时链接）

在任何浏览器中打开。较深的矩形为 CSS 方法 1，较浅的矩形为 CSS 方法 2。

【讨论】：

我做了更多的测试。现在 100% 肯定 .caption:empty{display:none;} div[class="caption"]{padding-left:50px;padding-right:20px;} 是新浏览器的最佳解决方案。
你也可以添加#sb-caption[type=""]{visibility:hidden;}虽然这对IE6没有帮助

【解决方案2】：

我最近记得 IE 需要为伪元素指定一个 DOCTYPE 才能工作。

因此，当输入 DOCTYPE 时，该框会消失（至少在 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-caption:empty {display:none;}

我很确定，这是 Firefox 工作所需要的。

注意：我正在使用此方法在 shadowbox.js 中创建标题 <div>。
文本通过 JavaScript 输入到 <div id="#sb-caption"></div>，使用 <a rev=""></a>

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

rev="" 是您的字幕文本所在的位置。然后进入<div>

这是 shadowbox 复杂的变通方法/hack 的一小部分。

这是最终版本：

对于 Chrome 和 Firefox，请在此处查看：http://jsfiddle.net/FBwQd/
（它不会在 IE 中工作，因为 JS-fiddle 不识别 DOCTYPE）

对于 IE（和/或 Chrome），您可以在此处查看：http://cssdesk.com/Mrwh8

您可以删除字词'TEST'，让盒子完全消失！

【讨论】：

【解决方案3】：

使用十六进制颜色代码而不是 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

【讨论】：

为什么是十六进制颜色而不是 RGBA 颜色？
我会测试一下背景颜色。

【解决方案4】：

添加这个css：

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

【讨论】：

我想你明白了！这就是 Firefox 所缺少的！

【解决方案5】：

删除内容："";它适用于所有浏览器

【讨论】：

您也可以一并删除::before和::after规则。
如果白框中有文本，我需要有填充。
实际上，如果你删除content:""，那么在大多数浏览器上，伪元素就会完全中断。
@vitaly87：那是因为当你删除它时，伪元素完全消失了。这是设计使然，而不是错误。