html - Html: em 标签字符溢出错误

Question

html中的字符溢出问题是否有解决方法？这仅在有背景颜色且斜体 (em) 标记用于简单文本时可见。

在图片中寻找背景时的“i”字符。“i”不适合背景，并且它的某些部分溢出到右侧。

代码：

    aaaaa<em style="color:#ff0000;background-color:#c3ddfc;">hijyen bariyeri</em>, aaaaaaa

Answer 1

这是一个功能，而不是一个错误。例如，元素的框（当您设置背景颜色时会被着色）以不考虑斜体字母倾斜的方式确定。正如@MarcB 在评论中所建议的那样，您可以通过设置正确的填充来处理此问题，但存在一些复杂性。首先，所需的填充量不仅取决于字体大小（可以使用em单位来处理这种依赖性），还取决于具体的字体。倾斜角度因字体设计而变化很大，字符的形状也是如此——例如，倾斜的“f”比倾斜的“e”的效果要大得多。其次，当您在字母后跟标点符号后添加空格时，如示例中所示，单词和标记以一种印刷方式令人不快的方式分开。

因此，我建议您在元素内包含标点符号；这可能看起来不合逻辑（逗号不是强调表达式的一部分），但它在印刷上是足够的。通常，这足以解决问题。例子：

Özetle <em style=
"color:#ff0000; background-color:#c3ddfc;"
>hijyen bariyeri,</em> hiye

如果斜体字后面不是标点符号而是正常的字空间，可以考虑设置0.2em左右的右填充，但具体值要经过一些测试再决定。例子：

Özetle <em style=
"color:#ff0000; background-color:#c3ddfc; padding-right: 0.2em"
>hijyen bariyeri</em> hiye

0.2em 的值通常适用于 Arial 等字体。对于没有斜体字体的字体，强制浏览器产生“假斜体”，可能需要像 0.3em 这样的值，因为这种合成倾斜（可能在您的示例中应用）使用大倾斜角度来补偿缺少真正的斜体。对于衬线字体，比如 Cambria 或 Times New Roman，0.1em 对大多数字符来说可能就足够了。