HTML / CSS：Webkit浏览器切断斜体链接

Question

我有什么
我有一个普通的HTML链接，例如<a href="#">Link</a>。在我的样式表中，我已将该链接设置为display: inline-block;，因为我必须将其推到一点以匹配布局。
font-style设置为italic。

问题
这会导致以下问题：由于文本以斜体显示，因此链接词的最后一个字母超出了链接周围的框。因此，Safari＆amp; Chrome在悬停时“切断”了颜色变化。查看截图，我为链接指定了背景颜色，以使其更清晰
正常链接颜色是浅色，蓝色是悬停颜色。

Firefox正确管理，无需削减任何内容。

为链接设置填充可能是最简单的解决方案，但我觉得对我来说是一种解决方法。还有其他解决方案吗？

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

Answer 1

您总是可以在斜体类中添加填充，例如：

a{
    display: inline-block;
    font-style: italic;
    font-size: 100pt;
    background-color: red;
    color: white;
    padding: 0 10px;
}

会给你这个：http://jsfiddle.net/8ZAUf/ - 这似乎在我测试的所有浏览器中都显示相同的内容（opera，safari，chrome，firefox）。

你也可以采取Kamo的建议，虽然我会稍微修改它并执行此操作：

#prob:after{
  content: '\00a0';
  font-size: 18pt;
}

给你：http://jsfiddle.net/AZS6S/，然后你可以重复使用它（显然是通过使用类，而不是id）。