集团`dt`和`dd`在``下dl` span` [英] Group `dt` and `dd` in `span` under `dl`

查看:197
本文介绍了集团`dt`和`dd`在``下dl` span`的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图显示或内隐藏某些 DT / DD 组DL 。这是有效的HTML?如果浏览器抱怨这还是合法?我看了看 DL 规格,但找不到任何东西说, DL 可以包含其他的东西比 DT DD 的孩子。我需要做的这是我使用 angularJS 提供添加或删除从 DOM元素的这种简洁的方式

 < D​​L>
  < D​​T>条款< / DT>
  < D​​D>定义< / DD>  <跨度NG-IF =真正的>
    < D​​T>期限2'; / DT>
    < D​​D>定义2'; / DD>
  < / SPAN>
< / DL>


解决方案

这是无效的HTML5,因为的 DL 元素是


  

零个或多个组,每组由一个或多个 DT 元素
  后面跟着一个或多个 DD 元素,任选与混合
  脚本的支持元素的。


所以 DL 不能包含跨度,但大多数浏览器将呈现正确的。

而不是跨度,我建议使用的 元素。它们是无效的HTML5了,但是在XHTML 2是有效的。

 < D​​L>
  < D​​T>条款< / DT>
  < D​​D>定义< / DD>
  <二NG-IF =真正的>
    < D​​T>期限2'; / DT>
    < D​​D>定义2'; / DD>
  < / DI>
< / DL>

不过,缺点是,旧的IE浏览器将无法识别,所以除非你使用文件也不会CSS样式适用于他们.createElement(DI),该文件加载时

I'm trying to show or hide certain dt/dd groups within a dl. Is this valid HTML? Should browsers complain about this or is it legit? I've looked at the dl specs but couldn't find anything saying that the dl can contain something other than dt and dd children. I need to do this as I'm using angularJS which provides this neat way of adding or removing elements from the DOM

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>

  <span ng-if="true">
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
  </span>
</dl>

解决方案

This is not valid HTML5, because the content model of dl elements is

Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.

So dl can't contain span, but most browsers will render it correctly.

Instead of span, I suggest using di elements. They are invalid HTML5 too, but were valid in XHTML2.

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
  <di ng-if="true">
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
  </di>
</dl>

However, the downside is that old IE won't recognize di, so it won't apply CSS styles to them unless you use document.createElement('di') while the document is loading.

这篇关于集团`dt`和`dd`在``下dl` span`的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆