0

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

在谷歌浏览器中打开：http : //jsfiddle.net/8EbxG/4/

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

现在，在 IE9 或 Firefox 中打开。

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

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

4

5 回答 5

1

添加这个CSS：

#sb-caption:empty {display:none;}
于 2012-10-18T06:27:54.880 回答
0

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

于 2012-10-18T06:26:15.510 回答
0

使用十六进制颜色代码而不是 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-18T06:35:56.470 回答
0

我最近记得 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工作所需要的。

注意：我使用此方法<div>在shadowbox.js中创建标题。
文本<div id="#sb-caption"></div>通过 JavaScript 输入，使用<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”字样，让盒子完全消失！

于 2012-10-18T18:28:06.330 回答
0
于 2012-10-18T18:40:48.373 回答