我有一些内联链接，图标显示在左侧（填充+背景），但是当字体太小时，图像不适合行高，并且会在顶部和底部被裁剪。
有没有什么方法可以在不使用javascript的情况下防止这种情况发生？我不想以 px 为单位设置字体大小..
将某些 min-line-height 设置为非相对值（图像的高度）将是理想的。
在处理块元素内的内联元素时，您没有很多选项来更改其边界框的大小。min-height不适用于内联元素，并且line-height不会有任何影响。
设置适当的padding可能是一个合理的选择，但您可能会遇到元素背景与包含块内的其他元素重叠的问题。
作为一个快速演示，请尝试以下操作：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
span {
background: #0F0;
padding: 0.5em 0;
}
</style>
</head>
<body>
<p>This is some demo text. Look at how <span>texty</span> it is.</p>
</body>
</html>
你会看到背景textyspan 垂直扩展，但它会重叠前一行和后一行的文本。您可以设置元素的display财产给inline-block在现代浏览器中可以避免此问题，但是行距会不一致，如果它位于文本块内，这几乎肯定会分散注意力。
我认为，无论喜欢与否，您最好的选择就是确保您想要应用于链接的图像适合您将显示的文本。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
