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

我拥有的
我有一个普通的HTML链接，比如

。在我的样式表中，我将该链接设置为

display:inline block因为我必须将其推一推以匹配布局。

font-style
设置为
italic

问题

这会导致以下问题：因为文本设置为斜体，所以链接单词的最后一个字母超出了链接周围的框。正因为如此，Safari&Chrome在悬停时“切断”了颜色变化。查看我为链接指定背景色的屏幕截图，使其更清晰。



正常链接颜色为浅颜色，蓝色链接颜色为悬停颜色

Firefox可以正确地管理这一点，而不会造成任何中断

为链接设置填充可能是最简单的解决方案，但我觉得这是我的一个解决办法。还有其他解决办法吗

Fiddle:
您可以将
添加到链接中：
，但这是常见的错误和错误。
您可以始终在italic类中添加填充，例如：

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

我想告诉你：-在我测试的所有浏览器（opera、safari、chrome、firefox）中都显示相同的内容

你也可以接受卡莫的建议，尽管我会稍微修改一下，然后这样做：

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

给你：，你就可以重复使用它（显然是通过使用类，而不是id）。

.链接{
背景：#999；
显示：内联块；
}
.链接a{
字体：斜体；
颜色：#000；
}
.链接a：悬停{
颜色：#00F；
}

我已经创建了上面的代码。请尝试此操作。
您可以使用javascript强制重画。它看起来仍然不完全正确，因为文本仍然比边界框大，您可以在背景中看到边界框，但是如果这不是问题，您可以使用此解决方案

见：


主要是：

var prob = document.getElementById('prob');
prob.addEventListener('mouseover', function() {
  // force a repaint of the parentNode:
  prob.parentNode.style.color = 'blue';
}, false);
prob.addEventListener('mouseout', function() {
  // force a repaint of the parentNode:
  prob.parentNode.style.color = 'pink';
}, false);

可能有更好的方法来强制重画。
你能用这个例子创建一个错误，这样我们就可以看到它的实际效果吗？@Rune补充道，请看我文章中的编辑。我现在明白你的意思了，但除了填充之外，我找不到任何方法来修复这个问题。有人可以向or提交一个错误，或者提供到现有错误的链接吗？
var prob = document.getElementById('prob');
prob.addEventListener('mouseover', function() {
  // force a repaint of the parentNode:
  prob.parentNode.style.color = 'blue';
}, false);
prob.addEventListener('mouseout', function() {
  // force a repaint of the parentNode:
  prob.parentNode.style.color = 'pink';
}, false);