Смещение <div>для UTF-8 японских символов

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 - это то, что я ожидаю / хочу.

Однако, когда я перехожу на японские символы на другие языковые символы (Engli sh, китайский, корейский и др. c.). Все они выглядят правильно.

1. Как правильно отформатировать японские символы в этом случае

2. Почему японские символы так необычны в этом случае в разных браузерах при условии, что все они закодированы в кодировке UTF-8?

Answer 1

Почему японские символы так необычны в этом случае в разных браузерах при условии, что все они закодированы в кодировке UTF-8?

Они особенные, потому что используют другой шрифт и, следовательно, выше, чем Латинские буквы Вы можете увидеть тот же результат, если будете использовать латинский текст, но увеличите font-size для этого специфика c значение 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>