HTMLCSS：Webkit浏览器切断斜体链接

概述是)我有的我有一个普通的HTML链接,例如< a href =“#”> Link< / a>.在我的样式表中,我已将该链接设置为display：inline-block;因为我必须推动它以匹配布局.font-style设置为斜体.问题这会导致以下问题：由于文本以斜体显示,因此链接词的最后一个字母超出了链接周围的框.因此,Safari& Chrome在

是)我有的
我有一个普通的HTML链接,例如< a href =“#”> link< / a>.在我的样式表中,我已将该链接设置为display：inline-block;因为我必须推动它以匹配布局.
Font-style设置为斜体.

问题
这会导致以下问题：由于文本以斜体显示,因此链接词的最后一个字母超出了链接周围的框.因此,Safari& Chrome在悬停时“切断”了颜色变化.查看截图,我为链接指定了背景颜色,以使其更清晰.

正常链接颜色是浅色,蓝色是悬停颜色.

firefox无需削减任何内容即可正确管理.

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

小提琴：http://jsfiddle.net/qD78e/最佳答案您总是可以在斜体类中添加填充,例如：

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: 'a0';  Font-size: 18pt;}

给你：http://jsfiddle.net/AZS6S/,然后你可以重复使用它(显然是通过使用类,而不是ID). 总结

以上是内存溢出为你收集整理的HTML / CSS：Webkit浏览器切断斜体链接全部内容，希望文章能够帮你解决HTML / CSS：Webkit浏览器切断斜体链接所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。