style="display:none" 的 CSS 替代品
Posted
技术标签:
【中文标题】style="display:none" 的 CSS 替代品【英文标题】：CSS Alternatives to style="display:none" 【发布时间】：2013-03-29 03:52:00 【问题描述】：我正在实现一个 JSF 组件库，您必须在其中覆盖正在使用的 css，否则它将使用其默认 css。我试图隐藏div 并尝试设置rich-panelbar-header-act class style="display:none"，但随后它会拉入其默认css。有什么方法可以将隐藏div 的样式属性添加到rich-panelbar-header-act（因为我必须实现该类）？我在下面包含了我的 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%;" ><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>
【问题讨论】：
请发布 CSS 代码。我不明白为什么 display: none 不起作用。使用更具体的选择器？ @ExplosionPills 发布 css/html 【参考方案1】：width: 0; height: 0;
或
visibility: hidden;
或
opacity: 0;
或
position: absolute; top: -9999px; left: -9999px;
或者只是
display: none !important;
【讨论】：
关于可访问性的注意事项：屏幕阅读器将忽略使用display: none 和 visibility: hidden 隐藏的元素（这是很好的意图），但仍会读出位于视口之外的元素（通过负文本缩进或左/右翻译）。我认为一个屏幕阅读器（它是 VoiceOver 吗？）会忽略带有 height:0 的元素，但其他人不会。因此请注意，某些用户仍会感知到您的（并非如此）隐藏的内容，而您可能认为是这样。 定位在视口之外在 CSS 框架和 CMS 模板中通常称为 .visually-hidden 来表达这一点。
相关：不要使用top: -9999px，因为它可能会导致视觉跳转到页面顶部并返回到以前的位置，以便人们使用键盘在您的内容中导航。 left: -9999px（或 RTL 语言中的正确）很好，因为它不会垂直移动滚动位置并且足够了。这涉及可聚焦的元素（本质上是链接，表单元素），但由于左边的属性就足够了，最好完全避免顶部
几年后，这似乎也是一个有趣的选择：line-height:0; overflow:hidden; padding:0; margin:0
h,w - 0 正是我想要的，没有人阻止某些组件在就绪事件中完全加载.. 我认为【参考方案2】：
我想visibility:hidden; 会帮助你。 :)
【讨论】：
【参考方案3】：这对我有用..
!important 不能在 amp 版本中使用，因此请使用以下代码代替 display:none;：
position: absolute; top: -9999px; left: -9999px;
【讨论】：
【参考方案4】：使用 !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>
【讨论】：
【参考方案5】：这个问题已经得到解答，尽管我看到最初的答案有几个缺陷......虽然他们将元素从屏幕上视觉上移开，但网络可访问性指南建议不要使用其中的几个。
为了提供更简单、更好的答案，visibilty: hidden; 将是一个选项，但如果您需要该元素所在的空间，display: none !important; 将是您的最佳选择。标签!important 应该覆盖作用于<div> 的其他CSS 元素。
如上所述，简单地将元素从页面上移开（例如position: absolute; top: -9999px; left: -9999px;）并不被认为是网络可访问性指南的最佳做法，因为大多数电子阅读器仍会阅读您在其中的任何文本元素，并且键盘用户可能能够导航到该元素，即使它位于“屏幕外”。
如果我有其他 CSS 类作用于我需要隐藏的元素，我通常使用 display: none !important。
【讨论】：
【参考方案6】：我想这会对你有所帮助
您可以通过两种方式做到这一点：
使用更多属性
你可以简单地使用这个：[编辑：添加 !important 到属性]
visibility: hidden!important;position: absolute!important; top: -9999px!important; left: -9999px !important;opacity: 0 !important;width: 0 !important; height: 0!important;
我认为它会起作用。 它使用了所有可以在 CSS 中使用的属性。
使用 !important 元素
display:none!important
【讨论】：
以上是关于style="display:none" 的 CSS 替代品的主要内容，如果未能解决你的问题，请参考以下文章
style="display:none" 的 CSS 替代品
div class="" style="display:none"是啥意思啊？
移除 style="display:none;" 时的 CSS 高度过渡