是)我有的
我有一个普通的HTML链接,例如< a href =“#”> Link< / a>.在我的样式表中,我已将该链接设置为display：inline-block;因为我必须推动它以匹配布局.
font-style设置为斜体.
问题
这会导致以下问题：由于文本以斜体显示,因此链接词的最后一个字母超出了链接周围的框.因此,Safari& Chrome在悬停时“切断”了颜色变化.查看截图,我为链接指定了背景颜色,以使其更清晰.
正常链接颜色是浅色,蓝色是悬停颜色.
Firefox无需削减任何内容即可正确管理.
最佳答案
您总是可以在斜体类中添加填充,例如：
原文链接：https://www.f2er.com/html/425921.htmla{
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).
