Почему японские символы так необычны в этом случае в разных браузерах при условии, что все они закодированы в кодировке 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>