dl标签在不同的浏览器中以不同的方式显示为什么？

Question

为什么用于创建定义列表的<dl>元素的三元组中包含的<dl>, <dt>, <dd>标记在不同的浏览器中显示不同以及如何修复它？

示例：如果您使用Chrome浏览器查看此代码，那么一切都会正常（如果您是Chrome开发人员）并且您没有看到任何异常，但是如果您看一下Mozilla（如果您是Web开发人员）（在我的位置开发者版本中，然后你会看到无处不在的奇妙缩进。

这是在jsfiddle的mozilla外观，你会看到差异。

.horizontal_dl {
  /*white-space: nowrap;*/
  display: flex;
  flex-direction: column;
}
.horizontal_dl dd {
    margin-left: 155px;
    display: flex;
    line-height: 19px;
}
.horizontal_dl dt {
  /*overflow: hidden;*/
  display: flex;
  flex-basis: 0px;
  
}
dl, dt {
  color: #000;
  font-size: .9em;
}
dl {
  margin-top: 0;
}
dt {
  font-weight: 700;
}
dd {
  margin: 0 0 .563em;
}
.text_upper {
  text-transform: uppercase;
}

 <dl class="horizontal_dl">
   <dt class="text_upper">Full Name</dt>
   <dd>Robert Smith</dd>
   <dt class="text_upper">D.o.b.</dt>
   <dd>05 June 1988</dd>
</dl>

Answer 1

首先，我没有看到Chrome和Firefox有任何差异，对我来说也是如此。

我认为以下代码可能会帮助您获得所需的结果。我只重新设计了你的代码的dd，dl和dt部分，但它有望帮助你重回正轨。

它看起来像这样：

dl {
  width: 200px;
  overflow: visible;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}
dl dt {
  flex: 0 0 50%;
    color: #000;
  font-size: .9em;
}
dl dd {
  flex:0 0 50%;
  margin-left: auto;
  overflow: hidden;
}

dl {
  margin-top: 0;
}
dt {
  font-weight: 700;
}
dd {
  margin: 0 0 .563em;
}
.text_upper {
  text-transform: uppercase;
}

 <dl class="horizontal_dl">
   <dt class="text_upper">Full Name</dt>
   <dd>Robert Smith</dd>
   <dt class="text_upper">D.o.b.</dt>
   <dd>05 June 1988</dd>
</dl>

你可能想把它粘贴在你的jsfiddle中，在我这边我可以看到内联标记。