HTML5隐藏属性与Bootstrap不兼容

Question

我正在重构一些代码，并决定更改通常的style="display:none"以使用HTML5 hidden属性，以隐藏按钮。只是发现它与bootstrap的btn类不兼容。也就是说，我将继续使用样式显示属性，但我想知道这是一个应该报告的错误，还是每个人都应该注意的功能。

可以找到相应的jsfiddle here

Answer 1

HTML5规范已经警告开发人员：

  

注意：由于此属性通常使用CSS实现，因此也可以使用CSS覆盖它。 例如，应用＆＃39; display：block＆＃39;所有元素都将取消隐藏属性的效果。作者因此在编写样式表时必须小心，以确保属性仍按预期进行样式化。

     

- The HTML5 Specification - 7.1 The hidden attribute

您遇到的问题是Bootstrap的.btn选择器专门定义display: inline-block，它会覆盖hidden属性display: none

这意味着特异性将成为一个问题。这是一种罕见的情况，可能需要!important。我亲自实施以下风格规则：

[hidden] {
  display: none !important;
}

这可确保具有hidden属性的所有元素都将设置为不显示，无论其具体如何。这是非常好的，因为这将使hidden属性在任何支持[att]选择符表示法的浏览器上有效（这是支持CSS2的任何浏览器）。

Working JSFiddle demo

Answer 2

尝试将此添加到您的css：

*[hidden] { display: none !important; }

例如

; https://fiddle.jshell.net/bh8h5tya/

Answer 3

它没有被隐藏，因为bootstrap在display: inline-block类上应用了.btn

Bootstrap提供了以下.hidden类，可用于显示/隐藏元素。尝试使用它。

.hidden {
  display: none !important;
}