Question

好吧，当然我理解为什么会这样，我只是希望有一些创造性的解决方案。让我们说我有这个元素：

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

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

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

的jsfiddle：

http://jsfiddle.net/M9V3Q/

更多信息

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

Answer 1

您可以使用此方法：

#hoverEle {
    width: 100px;
}

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

小提琴：http://jsfiddle.net/M9V3Q/4/

缺点是固定宽度。

顺便说一句，我认为像这样关注按钮是个坏主意。更精彩的用户将是简单的颜色变化（例如#ccc），可能还有transition效果。我觉得它好多了。

试试这个小提琴：http://jsfiddle.net/M9V3Q/9/

我认为即使在这种变体中它也更美丽：）

Answer 2

尝试类似：

.element {
    padding: 0 1px;
    border: 2px solid transparent;
}
.element:hover {
    font-weight: bold;
    border: none;
}

小提琴：http://jsfiddle.net/F4knz/

Answer 3

可以随时尝试CSS3大小调整。它会切入填充，边框等元素宽度等，因此可以防止元素扩展到其设置宽度之外。

需要为Firefox和safari添加-moz-或-webkit-前缀。

CSS Hover：使用填充大胆更改元素大小

3 个答案: