Question

这是我正在努力完成的一个非常基本的演示。

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

中打开

除了灰色矩形外，它应该看起来像没有任何东西。

现在，在IE9或Firefox中打开。

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

我需要做些什么才能让它看起来像Chrome Chrome 跨浏览器（我甚至没有测试过旧的IE，Opera或Safari）？

Answer 1

添加此css：

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

Answer 2

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

Answer 3

使用Hex颜色代码而不是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

Answer 4

我最近记得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>。
  使用<div id="#sb-caption"></div>
通过JavaScript将文字输入<a rev=""></a>
示例： <a href="LINK" rev="YOUR CAPTION">

rev=""是您的字幕文字的去处。然后会进入<div>

这只是影子盒的复杂解决方案的一小部分。

以下是最终版本：

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

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

您可以删除字词'TEST'以完全看清Box消失！

Answer 5

我做了一些关于伪元素和伪类的阅读我发现你也可以替换（方法1）：

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

with（方法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 的最新版本中进行测试。

如果其他人有其他黑客或其他方式达到相同的效果（但更加跨浏览器友好... IE7）请分享！

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

在任何浏览器中打开。较暗的矩形是CSS方法1，较轻的矩形是CSS方法2.

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

5 个答案: