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

Question

我拥有的
是一个普通的HTML链接,比如<a href="#">Link</a>.在我的样式表中,我已经设置了该链接,display: inline-block;因为我必须将它推到一点以匹配布局.
该font-style设置为italic.

问题
这会导致以下问题:由于文本以斜体显示,因此链接词的最后一个字母超出了链接周围的框.正因为如此,Safari和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）。