html - CSS 悬停 : Bold changing element size with padding

Question

好吧，我当然明白为什么会这样，我只是希望有一些创造性的解决方案。假设我有这个元素:

.element {
    padding:0 1px;
}
.element:hover {
    font-weight:bold;
}

填充到位对于视觉一致性至关重要，但是在进行悬停行为之前是否有一些我不知道的神奇方法可以锁定元素的宽度？

不幸的是，不允许使用 JavaScript。

JsFiddle:

http://jsfiddle.net/M9V3Q/

更多信息

客户对网站某些部分的需求非常具体，而导航就是其中之一，这让我很沮丧。他们坚持将黑色文本悬停在他们 Logo 中使用的深红色阴影上，并且他们希望按钮居中。由于不同的浏览器以不同方式呈现文本，因此创建一致外观的唯一方法是使用填充来创建宽度。不幸的是，对于正常的字体粗细，黑色很难阅读。

Answer 1

您可以使用这种方法:

#hoverEle {
    width: 100px;
}

#hoverEle {
    display:inline-block;
    border:1px solid black;
    padding:3px;
    text-align: center;
}
#hoverEle:hover {
    font-weight:bold;
}

fiddle :http://jsfiddle.net/M9V3Q/4/

缺点是固定宽度。

顺便说一句，我认为像这样聚焦按钮是个坏主意。对用户来说更漂亮的是简单的颜色变化(例如 #ccc)和可能的 transition 效果。我认为它要好得多。

试试这个 fiddle :http://jsfiddle.net/M9V3Q/9/

我认为即使在这个变体中它也更漂亮 :)