html - 边框和-ve边距会导致Firefox换行，但不会导致Chrome

这是在悬停点上的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>的像素宽度增加几个）不是有效的解决方案！）

最佳答案

由于我对内联框模型不熟悉，因此不确定是不是这两种浏览器中都有错误，但是使用轮廓而不是边框​​seems to work well作为轮廓，即使在内联级框上，轮廓也不会影响框的大小：

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

关于html - 边框和-ve边距会导致Firefox换行，但不会导致Chrome，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18833146/