0

我正在使用 ShadowBox 来显示媒体。它有一些属性showOverlay，我将其设置为 false，因为不需要它。问题是尽管 CSS 中的 Visibility 设置为hidden，但背景无法访问，就像 ShadowBox 是模态对话框一样。在 Chrome 和 Mozilla 中，它将变为可见并且是模态的。如果我再次将其更改回hidden ，它可以手动工作。

但是为什么它总是在 Chrome 和 Mozilla 浏览器 sourcepage/css 中设置为可见？？？？

这是我的 ShadowBox CSS：

#sb-container {
    position: fixed;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    z-index: 999;
    text-align: left;
    visibility: hidden;
    display: block;
}

#sb-overlay {
    position: relative;
    height: 100%;
    width: 100%;
    visibility:hidden;
}

#sb-wrapper {
    position: absolute;
    visibility: hidden;
    width: 100px;
}

这就是Chrome 和 Mozilla 所做的！在资源管理器中它有效！ **在此处输入图片描述**

4

4 回答 4

1

与样式表中定义的 CSS 样式相比，内联样式（位于 上的样式element.style）具有更高的“优先级”。

你可以做什么：

  • 如果可能的话，最好避免使用内联样式。最好用最少的特异性来设计你的元素。这样，它们以后很容易被覆盖。

    请注意，通过 JS ( someElement.style.someStyleHere) 更改样式也算作内联样式。

  • 如果是动态更改样式，最好在 CSS 类中定义样式，并使用 JS 在目标元素上动态添加或删除这些类。

    如果您熟悉 jQuery，则addClass和removeClass是我引用的函数。当然，您可以提出自己的函数来解析元素的className，并添加或删除所述类。

  • 如果避免内联样式不是一种选择（由于您使用的某些框架会这样做），您可以通过放置!important在样式表中定义的样式来覆盖内联样式。这有点轻率，通常用作推翻内联样式的最后手段。

于 2013-10-30T12:31:57.477 回答
0

根据您的屏幕截图，它似乎visiblity: visible被设置为元素style的属性内部。style该style属性始终覆盖任何样式表中的内容。

于 2013-10-30T12:31:42.047 回答
0

尝试使用visibility: hidden !important;

于 2013-10-30T12:36:34.377 回答
0

这是 CSS 中一个非常简单且有趣的概念，称为CSS Specificity

它向浏览器定义在覆盖规则的情况下要应用哪个 CSS 规则。

在您的情况下，您已将内联 CSS 样式应用于您的 html 元素。由于它具有最高优先级，因此您在外部 .css 文件中写入的任何内容都将被忽略。

为避免这种情况，请从您的 html 代码中删除所有内联 css，并尝试将它们合并到您拥有的外部 css 文件中。或者正如许多人已经建议的那样，您可以使用“！important”来获得最大的优势。

希望这可以解决问题。

于 2013-10-30T12:39:41.020 回答