我正在重构一些代码并决定更改通常的 style="display:none"
以使用 HTML5 hidden
属性,以隐藏按钮。才发现和bootstrap的btn
类不兼容。也就是说,我会继续使用 style display 属性,但我想知道这是一个应该报告的错误,还是只是一个每个人都应该知道的功能。
可以找到对应的jsfiddle here
最佳答案
HTML5 规范已经就此警告开发人员:
Note: Because this attribute is typically implemented using CSS, it's also possible to override it using CSS. For instance, a rule that applies 'display: block' to all elements will cancel the effects of the hidden attribute. Authors therefore have to take care when writing their style sheets to make sure that the attribute is still styled as expected.
您遇到的问题是 Bootstrap 的 .btn
选择器专门定义了 display: inline-block
,它覆盖了 hidden
属性的 显示:无
。
这意味着特异性将成为一个问题。这是极少数情况下可能需要 !important
。我会亲自实现以下样式规则:
[hidden] {
display: none !important;
}
这确保了所有具有hidden
属性的元素都将被设置为不显示,无论其具体性如何。这是双重好处,因为这将使 hidden
属性在任何支持 [att]
选择器符号(支持 CSS2 的浏览器)的浏览器上有效。
关于css - HTML5 隐藏属性与 Bootstrap 不兼容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31835236/