Html：em标记字符溢出错误

Question

有没有解决方法可以解决html中的字符溢出问题？这只有在背景颜色和斜体（em）标签用于简单文本时才可见。

寻找“我”字时，背景中的图片。 “我”不适合在背景中，并有一部分溢出到右侧。

代码：

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就足够了。