Chrome 和 Firefox 之间的 Wordpress 显示差异答案

【问题标题】：Wordpress display difference between Chrome and FirefoxChrome 和 Firefox 之间的 Wordpress 显示差异
【发布时间】：2012-08-23 08:38:50
【问题描述】：

我希望有人可以帮助我。我在 Wordpress 中使用“拉出”小部件来显示内联“链接”，以在需要包含滚动条的漂亮照片框中打开某些文本。

这在谷歌浏览器中运行良好，但是当我在 Firefox 中显示该页面时，它包括拉拉选项卡内文本框的所有文本，并且在单击链接之前不会隐藏它？

在我用过的css中：

.hide
{
display:none;
}

这是我的小部件的代码：

<a href="#inline-1" rel="prettyPhoto" >Link</a>
    <div id="inline-1" class="hide">
        <p>Text to appear in prettyPhoto textbox when the Link is clicked



</p></div>
    </div>

任何帮助将不胜感激

谢谢

【问题讨论】：

标签： javascript css wordpress widget prettyphoto

【解决方案1】：

请检查元素 #inline-1 的 CSS 规则（如果有）。如果在#inline-1 上设置了display:block;，它将覆盖.hide 类的display:none;，因为按ID 的CSS 规则比按类的规则更具体。

为此，您可以使用 Firebug for Firefox 等工具。

此外，prettyPhoto 插件可能正在修改 #inline-1 div 的显示，导致它显示。

【讨论】：

感谢您的回复。我似乎没有看到任何 display:block - 在 css 中？但是，当我在 Chrome 中“检查元素”时，我看到一个被划掉的“display:block”？
是的，显示：块；被划掉，因为 display:none;覆盖它。您应该尝试在 Firefox 上使用 Firebug 检查该元素，看看发生了什么。您还可以禁用插件并使用纯 CSS 来查看发生了什么。