Question

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

示例：如果您使用Chrome浏览器查看此代码，那么一切会很好（如果你是Chrome开发人员）并且你没有看到任何异常，但是如果你看看Mozilla（如果你是一个Web开发人员）（开发人员）在我的位置编辑），然后你会看到奇妙的缩进从哪儿冒出来的。

mozilla中有一个jsfiddle外观，您会看到差异。

.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部分，但它有望帮助你重回正轨。

它看起来像这样：

＆＃13;

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;
}

＆＃13;

 <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>

＆＃13;

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

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

1 个答案: