首页 > 怎样屏蔽Chrome对details标签的处理

怎样屏蔽Chrome对details标签的处理

Chrome又开始做一些自作聪明的事情了,在Mac OSX上升级到Chrome 13以后发现,它把所有html5中details标签都默认自动折叠了,还加上了一个恶心的小三角。

有什么方法能屏蔽chrome默认的效果呢?


chromuim并没有自作聪明,w3.org文档原话说了

The details element represents a disclosure widget from which the user can obtain additional information or controls.

所以不是chromuim要实现这种效果而是按w3c标准必须实现这种效果
另外文档提到

The open content attribute is a boolean attribute. If present, it indicates that the details are to be shown to the user. If the attribute is absent, the details are not to be shown.

所以默认要显示details加属性open="open"

请参考w3c文档http://dev.w3.org/html5/spec/Overview...


参考 http://www.w3schools.com/html5/tag_su...,想要隐藏 details 标签的带箭头的 "details",可以这样做:

<stlye>
summary { display:none; }
</style>

<details open="open">
<p>If your browser supports this element, it should allow you to expand and collapse these details.</p></details>

解释:

  1. summary 元素包含的就是那个带箭头的 "details",用 CSS 隐藏掉就好
  2. 设置 open="open",这样 details 的内容默认是展开的
【热门文章】
【热门文章】