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.
但是,当我将日语字符更改为其他语言字符(英语、中文、韩语等)时。
他们看起来都不错。
在这种情况下如何正确格式化日语字符
为什么日语字符在这种情况下在不同的浏览器中如此特殊,前提是它们都是 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>
.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.
但是,当我将日语字符更改为其他语言字符(英语、中文、韩语等)时。 他们看起来都不错。
在这种情况下如何正确格式化日语字符
为什么日语字符在这种情况下在不同的浏览器中如此特殊,前提是它们都是 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>