CSS替代style ="display:none"

c12*_*c12 20 html css richfaces

我正在实现一个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;
}
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

Kal*_*yan 40

width: 0; height: 0;
Run Code Online (Sandbox Code Playgroud)

要么

visibility: hidden;
Run Code Online (Sandbox Code Playgroud)

要么

opacity: 0;
Run Code Online (Sandbox Code Playgroud)

要么

position: absolute; top: -9999px; left: -9999px;
Run Code Online (Sandbox Code Playgroud)

要不就

display: none !important;
Run Code Online (Sandbox Code Playgroud)

  • 关于辅助功能的注意事项:屏幕阅读器将忽略隐藏的元素`display:none`和`visibility:hidden`(意图很好),但仍然读出那些位于视口外的元素(通过负文本缩进或左/右翻译) ).我认为一个屏幕阅读器(是VoiceOver吗?)将忽略`height:0`的元素,但其他人则不会.因此,请注意,有些用户仍然会在您认为隐藏的内容时感知到您的隐藏内容.*定位在视口之外*通常在CSS框架和CMS模板中称为".visually-hidden"来表达这一点. (5认同)
  • 相关:请勿使用`top:-9999px`,因为它可能会导致视觉跳转到页面顶部并返回到之前的位置,以便使用键盘在您的内容中导航.`left:-9999px`(或RTL语言中的右边)很好,因为它不会垂直移动滚动位置,这就足够了.这涉及可聚焦元素(链接,表单元素),但由于左边的元素足够,最好完全避免顶部 (2认同)
  • 几年后,这似乎也是一个有趣的选择:`line-height:0; 溢出:隐藏;填充:0;边距:0` (2认同)

FeR*_*oll 5

我想visibility:hidden;会帮助你。:)