style="display:none" 的 CSS 替代品

问题描述 投票：0回答：6

我正在实现一个 JSF 组件库，您必须在其中覆盖正在使用的 css，否则它将使用其默认 css。我正在尝试隐藏 

div
并尝试设置 
rich-panelbar-header-act class style="display:none"
，但随后它会引入其默认 css。有什么方法可以将样式属性添加到隐藏
rich-panelbar-header-act
的
div
（因为我必须实现该类）？我在下面包含了我的 css 和 html

CSS：

element.style {
}
Matched CSS Rules
.rich-panelbar-header-act {
background-image: url(/spot-main-web/a4j/g/3_3_3.Finalorg.richfaces.renderkit.html.GradientA/DATB/eAGLj48PDQ1lBAAJswIe.html);
background-position: top left;
background-repeat: repeat-x;
vertical-align: middle;
color: #FFF;
background-color: #555;
font-size: 11px;
font-weight: bold;
font-family: Arial,Verdana,sans-serif;
}
.rich-panelbar-header-act {
border: 0 solid red;
padding: 0 1px 1px 5px;
cursor: pointer;
}
user agent stylesheetdiv {
display: block;
}
Inherited from body.browserChrome.browserChrome2
body {
font: 12px/17px Helvetica, Arial, Verdana;
}

HTML：

<html version="XHTML 2.0" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div class="rich-panelbar rich-panelbar-b " id="j_id95" style="padding: 0px; height: 400px; width: 500px; none">
<div class="rich-panelbar rich-panelbar-interior " id="j_id96" style="none"><div class="rich-panelbar-header " style=";">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-header-act " style=";;;;display: none;">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-content-exterior" style="display: none; width: 100%;"><table cellpadding="0" cellspacing="0" style="height: 100%;" width="100%"><tbody><tr><td class="rich-panelbar-content " style=";">

Ajax4jsf is fully integrated into the JSF lifecycle. While other frameworks only

give you access to the managed bean facility, Ajax4jsf advantages the action and value

change listeners as well as invokes server-side validators and converters during the

AJAX request-response cycle.</td></tr></tbody></table></div></div>
</div>
</body>
</html>
html css richfaces
6个回答
65
投票
width: 0; height: 0;

或

visibility: hidden;

或

opacity: 0;

或

position: absolute; top: -9999px; left: -9999px;

或者只是

display: none !important;
5
投票

我想

visibility:hidden;
会帮助你。 :)

2
投票

这对我有用..

!important
不能在放大器版本中使用，所以不要使用 
display:none;
使用这个：

position: absolute; top: -9999px; left: -9999px;
1
投票

使用 !important 来阻止它被覆盖 -

.rich-panelbar-header-act {
    display:none !important;
}

你也可以使用 JavaScript 作为备份 -

function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('DIVIDNAME').style.display = 'none';
}else {
if (document.layers) { // Netscape 4
document.DIVIDNAME.display = 'hidden';
}else { // IE 4
document.all.DIVIDNAME.style.display = 'none';
}}}
</script>
1
投票

您可以通过两种方式做到这一点：

使用更多属性

你可以简单地使用这个：[编辑：添加所有可能]

display: none!important;visibility: hidden!important;position: absolute!important; top: -9999px!important; left: -9999px !important;opacity: 0 !important;width: 0 !important; height: 0!important;filter: blur(10000px)!important;pointer-events: none!important;

这个解决方案是我最推荐的一个

使用 !important 元素

display:none!important
0
投票

这个问题已经得到回答，虽然最初的答案有几个我看到的缺陷......虽然他们从屏幕上看到了元素，但网络可访问性指南建议不要使用其中的几个。

为了提供更简单、更好的答案，

visibilty: hidden;
将是一个选项，但如果您需要该元素所在的空间，
display: none !important;
将是您的最佳选择。标签
!important
应该覆盖作用于该
<div>
的其他CSS元素。

如上所述，根据 Web 可访问性指南，简单地将元素从视觉上移出页面（例如 

position: absolute; top: -9999px; left: -9999px;
）不被认为是最佳实践，因为 most 电子阅读器仍会阅读元素中的任何文本，键盘用户将可能能够导航到该元素，即使它位于“屏幕外”。

如果我有其他 CSS 类作用于我需要隐藏的元素，我通常使用 

display: none !important
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.