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

Posted 2023-05-08

【中文标题】HTML/CSS：Webkit 浏览器截断了斜体链接

【英文标题】：HTML/CSS: Webkit browsers cut up italic link

【发布时间】：2013-01-02 03:01:06

【问题描述】：

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

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

Firefox 可以正确管理这一点，而无需删除任何内容。

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

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

【问题讨论】：

你能用这个例子创建一个jsfiddle，以便我们可以看到它的实际效果吗？

@Rune 已添加，请参阅我帖子中的编辑。

我现在明白你的意思了，但是除了填充之外我找不到任何方法来解决这个问题。

可以向WebKit Bug Tracker 或Chromium Bug Tracker 提交错误或提供现有错误的链接吗？

【参考方案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）。

【参考方案2】：

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

【参考方案3】：

您可以使用 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);

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

【参考方案4】：

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

我已经创建了上面的代码。请尝试一下。