边框和 -ve 边距会导致 Firefox 上的自动换行，但不会导致 Chrome答案

【问题标题】：Border and -ve margin causes word wrap on Firefox, but not Chrome边框和 -ve 边距会导致 Firefox 上的自动换行，但不会导致 Chrome
【发布时间】：2013-09-20 21:44:12
【问题描述】：

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

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> 添加更多像素宽度不是有效的解决方案！）

【问题讨论】：

标签： html css firefox

【解决方案1】：

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

span:hover {
    outline: 2px solid #336;
}

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

@BoltClock Humm 对内联元素进行大小调整？谢谢你的提示。我现在会仔细检查一下，但我认为你是对的。