我正在创建一些 HTML/CSS 来显示一个键,但如果标题文本与元素文本相比,最终会出现奇怪的垂直错位。
经过大量试验,我发现问题似乎只发生在文本加粗时,而且只有在使用 Lucida Sans 字体时才会发生。
您可以在这里看到这个问题的演示... http://jsfiddle.net/Ufa69/
HTML...
<div class="key">
<div class="t1">title:</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<div class="key">
<div class="t2">title:</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
CSS...
body {
font-family: "Lucida Grande","Lucida Sans","Arial",sans-serif;
}
.key {
padding: 2px;
font-size: 10px;
overflow: hidden;
border: 1px solid #666666;
background: #eeeeee;
margin-bottom: 4px;
}
.t1, .t2 {
float: left;
margin-right: 4px;
}
.t2 {
font-weight: bold;
}
.item {
float: left;
margin-right: 4px;
}
在演示中,您会看到文本在第一个 div 中正确对齐,但在第二个 div 中未对齐。两者之间的唯一区别是第二个使用粗体。
您可能会想,“那么,使用不同的字体”。
但有一个问题 - Lucida Sans 是 jQuery UI 的默认字体。
所以我希望一些聪明的 CSS 大师可以找到另一种方法来使该文本在加粗时正确运行。
(我在 Windows 的 Chrome、Firefox 和 Safari 中出现了这个问题,但在 IE 中没有出现)
最佳答案
它们未对齐,因为粗体文本和普通文本分配空间的方式不同,就好像与普通文本相比,粗体增加了font-size
。
我的解决方案是将字体大小增加到普通文本,这样它仍然是普通文本,但与粗体文本大小相同。请参阅下面我对您的 fiddle 的更新。
.t1{
font-size:12px;
}
注意:您可以使用很多选项来使粗体文本和普通文本正确对齐。您可以使用固定宽度的表格 td 或 div。
关于html - 加粗 Lucida Sans 时 CSS 中奇怪的文本对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20713988/