html - 加粗 Lucida Sans 时 CSS 中奇怪的文本对齐问题

Question

我正在创建一些 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 中没有出现)

Answer 1

它们未对齐，因为粗体文本和普通文本分配空间的方式不同，就好像与普通文本相比，粗体增加了font-size。

我的解决方案是将字体大小增加到普通文本，这样它仍然是普通文本，但与粗体文本大小相同。请参阅下面我对您的 fiddle 的更新。

.t1{
    font-size:12px;

}

http://jsfiddle.net/Ufa69/1/

注意:您可以使用很多选项来使粗体文本和普通文本正确对齐。您可以使用固定宽度的表格 td 或 div。