如何正确<ins> -markup <dl> <dt> <dd>？

Question

我正在使用<ins>和<del>标记文档中的编辑更改.为了使它们更具可读性,除了<u>和之外,它们还有一些绿色和红色<s>.除dl-dd-dt列表外,一切正常.在那里,我使用<ins>四周,但绿色不保留,<dt>也不保留<dd>.

我知道我可以另外添加<ins>到每个<dt>和<dd>.但是,如果可能的话,我会更倾向于采用更有原则的方法:毕竟,应该添加包括缩进在内的整个文本,而不仅仅是元素,因此单个封闭在语义上更准确<ins>.

(我使用的是Firefox 39.0,应该这个问题)

ins {
  background: #e4ffe4
}
del {
  background: #ffd0d0
}

<INS>
          Preamble, green
    <DL>
    <DT>dt: underlined but not green
    <DD>dd: underlined but not green
    
    <DT><INS>dt-with-ins, green</INS>
<DD>
  <INS>dd-with-ins, green</INS>

  </DL>
  </INS>

  <HR>
  <A href="http://validator.w3.org/check?uri=referer">Validated HTML</A>

Answer 1

ins元素默认为内联.尝试制作它们block或inline-block

ins {
  background: #e4ffe4;
  text-decoration: underline;
  display: inline-block;
}
del {
  background: #ffd0d0;
}

<ins>
  Preamble, green
  <dl>
    <dt>dt: underlined and green</dt>
    <dd>dd: underlined and green</dd>
    <dt><ins>dt-with-ins, green</ins></dt>
    <dd><ins>dd-with-ins, green</ins></dd>
  </dl>
</ins>
<hr />
<a href="http://validator.w3.org/check?uri=referer">Validated HTML</a>

Answer 2

干得好.只需添加一种ins dl风格.

ins, ins dl {
  background: #e4ffe4
}
del {
  background: #ffd0d0
}

<INS>
          Preamble, green
    <DL>
    <DT>dt: underlined but not green
    <DD>dd: underlined but not green
    
    <DT><INS>dt-with-ins, green</INS>
<DD>
  <INS>dd-with-ins, green</INS>

  </DL>
  </INS>

  <HR>
  <A href="http://validator.w3.org/check?uri=referer">Validated HTML</A>