为了说明问题（背景的alpha值为0.2用于演示目的）： http://jsfiddle.net/Novado/enhuc4jv/1/
<span style="font-family: impact; font-size: 500pt; font-style: italic;">
<span style="border: 1px dotted #000;background-color: rgba(10, 10, 10, 0.2);"><span style="border: 1px solid red;color: red;background-color: rgba(200, 0, 0, 0.2);">World</span> </span><span style="border: 1px dotted green; background-color: rgba(200, 0, 0, 0.2);"><span style="border: 1px solid blue; color: blue;background-color: rgba(0,0,200,0.2);">World</span> </span>
</span>
缺少符号 - 符号是故意的：html代码是后端生成的，字体样式可能会有所不同。可悲的是我还不能发布图片。如果删除“nbsp;” - 示例中的符号，您将看到第一个单词的最后一个字母将被下一个容器的背景部分剪切。
我在这个问题上找到的所有内容（好吧，有点）是这个链接：http://www.positioniseverything.net/explorer/italicbug-ie.html
通常情况下，某些字母（如'j'，'f'，特别是斜体形式）从容器盒中突出（如果没有填充物。）
但为什么呢？据我了解 - 这是一个HTML标准，但我找不到确切的文件，也无法找到这种行为背后的推理......
有人可以解释为什么这种行为被认为是正常的？对于“背景剪切字母”问题，是否有一个很好的解决方案？因为我看到的所有WYSIWYG也受此影响，但我似乎无法找到任何人抱怨（好吧，也许我只是吮吸搜索查询，谁知道）。
答案 0 :(得分：4)
正确引用的文件描述了字母可能会延伸超过其容器盒的边框，尤其是斜体字体。这是排版问题，因此在HTML或CSS规范中没有指定，尽管某些CSS材料可能会引用它。容器盒只是一个印刷师的操场，他可能有时会决定越过边界。容器盒的高度是字体大小，宽度是字形的前进宽度，程序在布置文本时使用这些量;他们不限制字形。
当使用伪斜体（合成斜体，算法倾斜文本）时会更加如此，当您使用Impact并请求斜体时会发生这种情况。它没有斜体字体，即由印刷师设计的斜体形式的字形，因此浏览器需要忽略您的请求或生成伪斜体。由于字母的形状不会改变，除了通过倾斜，倾斜角度必须相当大，以使“斜体”看起来与正常不同。倾斜量使得更有可能越过容器盒的右边界。
在经典排版中，可以通过在需要时添加一些间距来解决此类问题。这很难自动化，因此这些天大多没有完成。在CSS中，你可以使用padding-right，但你自然需要在一个元素（通常是span）中包含一个单词或一个字母，这样你就可以将样式应用到，例如。
<span style="padding-right: 0.08em">World</span>
或
<i style="padding-right: 0.08em">World</i>
这当然很麻烦，特别是因为间距的数量需要取决于最后一个字母（以及字体和下一个字母的第一个字母）。或者，你可以使用固定宽度的空格，例如 ，它对应于铅排版中使用的方法（在打印字母后放置一块狭窄的金属），但这不灵活且不可靠（这些字符的宽度实际上因字体而异。