5

我有什么我
有一个普通的 HTML 链接，比如<a href="#">Link</a>. 在我的样式表中，我已将该链接设置为，display: inline-block;因为我必须稍微推动它以匹配布局。设置为
。font-styleitalic

问题
这导致了以下问题： 因为文本设置为斜体，链接单词的最后一个字母超出了链接周围的框。正因为如此，Safari 和 Chrome 在悬停时“切割”了颜色变化。请参阅我为链接分配背景颜色以使其更清晰的屏幕截图。
在此处输入图像描述
正常链接颜色是浅色，蓝色是悬停颜色。

Firefox 可以正确管理这一点，而不会削减任何内容。

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

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

4

4 回答 4

2

您始终可以向斜体类添加填充，例如：

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）。

于 2013-01-18T12:35:50.507 回答
1

您可以添加&nbsp;到您的链接：<a href="#" id="prob">Link&nbsp;</a>但这是常见的错误和令人沮丧的一个。

于 2013-01-18T12:30:53.140 回答
1

您可以使用 javascript 强制重绘。它看起来仍然不完全正确，因为文本仍然大于边界框，您可以在背景中看到边界框，但如果这不是问题，您可以使用此解决方案。

看：

http://jsfiddle.net/qD78e/15/

主要的事情：

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);

可能有更好的方法来强制重绘。

于 2013-01-18T12:45:12.420 回答
0 
<style>
.link{
    background:#999;
    display:inline-block;
}
.link a{
    font-style:italic;
    color:#000;

}
.link a:hover{
    color:#00F;
}
</style>

<div class="link">
    <a href="#">Link</a>
</div>

我已经创建了上面的代码。请试试这个。

于 2013-01-18T12:45:08.780 回答