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

Question

.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 中的布局是我所期望/想要的。

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

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

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

Answer 1

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

它们很特别，因为它们使用不同的字体，因此比拉丁字符高。如果您使用拉丁文文本，您可以看到相同的结果，但增加 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>