html - 粗体字使宽度改变

Question

我有一个 div，里面有一些文本和一个边框。

<div><span>This is my div</span></div>​

当我将鼠标悬停在该 div 上时，我希望字体为粗体。

div{
    border: 1px solid black;
    display:inline-block;
    padding:20px;
}

span{ 
    padding:20px;

}

div:hover{
    font-weight:bold;
}

​</p>

这使我的 div 有点宽 - 这会导致烦人的闪烁。

JSFiddle上的示例

我该如何解决这个问题？

编辑：

div 的宽度必须随内容增长，而不是随重量增长。

Answer 1

您的 divinline-block没有明确的宽度，因此它会收缩包装内容。该字体是比例字体，因此当它变粗时它会变得更粗（并占用更多的水平空间）。

给 div 一个固定的宽度，将其设置为block，或使用等宽字体。

Answer 2

您可以使用文本阴影模拟粗体效果。所以你会有

div:hover { 
text-shadow: 0 0 1px black, 0 0 1px black;
} 

您可以通过将 1px 更改为更高或更低的数字来控制影响。您还需要根据文本颜色更改阴影的颜色。在此处查看有关此解决方案的整篇文章： https ://www.sitepoint.com/quick-tip-fixing-font-weight-problem-hover-states/

Answer 3

我通过玩 letter-spacing 非常接近：

http://jsfiddle.net/thezver/U56R6/1/

<div>Asdf</div>
<div>ab acRsery</div>
<div>abc f</div>
<div>aMdNhjkl</div>
<div>1</div>

CSS：

div{
    display:inline-block;
    font-family:'Open Sans';
    font-size: 16px;
    padding:5px 10px;
    border:1px solid gray;
    letter-spacing: 0.5px;
}

div:hover{
    font-weight:bold;
    letter-spacing:-0.1px;
}

Answer 4

您可以将您的 div 设置为固定宽度并居中对齐您的文本以保持整洁

div{
    border: 1px solid black;
    display:inline-block;
    padding:20px;
    width: 150px;
    text-align: center;
}

span{
    padding:20px;
}

div:hover{ 
    font-weight:bold; 
} 

来自 jsFiddle 的工作示例

希望这可以帮助