0

这是在悬停时在跨度标签周围放置边框的代码示例：

CSS

p {
    background-color: #def;
    width: 137px; /* chosen so the text *just* fits, may need to alter
                   * for different browser or OS 
                   */
}
span {
    margin: 0;
}
span:hover {
    margin: -2px;
    border: 2px solid #336;    
}

HTML

<p>
    <span>hover</span> <span>over</span> <span>the</span> <span>words</span>
</p>

（参见演示：http: //jsfiddle.net/sS7vY/）

它使用 -ve 边距来补偿边框并避免悬停时文本移动位置。

在 Firefox 上，将鼠标悬停在最后一个单词上会导致它换行到下一行，我想避免这种情况。在 Chrome 上，它的行为符合我的预期，并且从不换行。

这是需要报告的 Firefox 错误吗？

有没有办法以适用于任意文本的方式在 Firefox 中防止这种包装？（即向外部添加更多像素宽度<p>不是有效的解决方案！）

4

2 回答 2

2

不确定这是否是任一浏览器中的错误，因为我不熟悉内联框模型，但使用轮廓而不是边框​​似乎效果很好，因为轮廓不会影响框大小，即使在内联级框上也是如此：

span:hover {
    outline: 2px solid #336;
}
于 2013-09-16T16:47:50.443 回答
0

我找到了你的一个可行的解决方案：jsfiddle.net/dgY4J

它似乎是“盒子大小”和可用宽度情况的混合。

此外，如果您使用css box-sizing，则不必处理具有负边距的边框。

最后一个提示：选择文本正好适合，可能需要针对不同的浏览器或操作系统进行更改 || 它会做相反的事情。没有浏览器呈现相同的字体类型。

于 2013-09-16T16:49:50.903 回答