UTF-8 日语字符的 <div> 未对齐

Misalignment of <div> for UTF-8 Japanese chars

.element-label {
  display: block;
  float: left;
  width: 260px;
  padding-left: .5em;
  background: #f0f0f0;
  color: #A00000;
  font-size: 9pt;
}

.element-value {
  display: block;
  float: left;
  margin-left: 1em;
  font-weight: bolder;
  white-space: nowrap;
  font-size: 9pt;
}
<div id="field1">
  <span class="element-label">Label 1 </span>
  <span class="element-value">テスト </span>
</div>
<br />
<div id="field2">
  <span class="element-label">Label 2 </span>
  <span class="element-value">testing value</span>
</div>

在 MS IE 中:

但是,在 Chrome 或 MS Edge 中: html 看起来像:

IE中的布局是我expect/want.

但是,当我将日语字符更改为其他语言字符(英语、中文、韩语等)时。 他们看起来都不错。

  1. 在这种情况下如何正确格式化日语字符

  2. 为什么日语字符在这种情况下在不同的浏览器中如此特殊,前提是它们都是 UTF-8 编码的?

Why Japanese chars are so special in this case in different browsers provided that they are all UTF-8 encoded?

它们很特别,因为它们使用不同的字体,因此比拉丁字符高。如果您使用拉丁文本,您会看到相同的结果,但增加 font-size 以获得该特定值 span.

然而,主要问题是您的包装器 div 元素基本上不存在,并且不会强制子元素成行,因此每个元素都试图靠近其兄弟元素。如果删除 br 元素,您会看到只有一行。

更好的解决方案是使用 css 将元素按行排序并完全删除 br。做到这一点的简单方法是在包装元素上使用 flex 。您还应该修复行的高度以获得更一致的外观(我添加了 line-height 来解决这个问题)。

.element-label {
  display: block;
  float: left;
  width: 260px;
  padding-left: .5em;
  background: #f0f0f0;
  color: #A00000;
  font-size: 9pt;
}

.element-value {
  display: block;
  float: left;
  margin-left: 1em;
  font-weight: bolder;
  white-space: nowrap;
  font-size: 9pt;
}

.row {
  display: flex;
  line-height: 9pt;
  margin-bottom: .3em;
}
<div class="row" id="field1">
  <span class="element-label">Label 1 </span>
  <span class="element-value">テスト </span>
</div>
<div class="row" id="field2">
  <span class="element-label">Label 2 </span>
  <span class="element-value">testing value</span>
</div>