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,0.2);"><span style="border: 1px solid red;color: red;background-color: rgba(200,0.2);">World</span> </span><span style="border: 1px dotted green; background-color: rgba(200,0.2);"><span style="border: 1px solid blue; color: blue;background-color: rgba(0,200,0.2);">World</span> </span>
</span>
缺少中断符号是故意的：HTML代码是后端生成的,字体样式可能会有所不同.可悲的是我还不能发布图像.如果删除“nbsp;” – 示例中的符号,您将看到第一个单词的最后一个字母将被下一个容器的背景部分剪切.
我在这个问题上发现的(好吧,有点)是这个链接：http://www.positioniseverything.net/explorer/italicbug-ie.html
It is normal that some letters (like ‘j’,‘f’,especially in their italic form) protrude from their container Box (if no padding is present.)
但究竟是为什么呢？据我了解 – 这是一个HTML标准,但我找不到确切的文件,也无法找到这种行为背后的原因……
有人可以解释为什么这种行为被认为是正常的？对于“背景剪切字母”问题,是否有一个很好的解决方案？因为我看到的所有WYSIWYG也受此影响,但我似乎无法找到任何人抱怨(好吧,也许我只是吮吸搜索查询,谁知道).
解决方法
当使用伪斜体(合成斜体,算法倾斜文本)时会更加如此,当您使用Impact并请求斜体时会发生这种情况.它没有斜体字体,即由印刷师设计的斜体形式的字形,因此浏览器需要忽略您的请求或生成伪斜体.由于字母的形状不会改变,除了通过倾斜,倾斜角度必须相当大,以使“斜体”看起来与正常不同.并且倾斜量使得更有可能越过容器盒的右边界.
在经典排版中,可以通过在需要时添加一些间距来解决此类问题.这很难实现自动化,因此现在大部分时间都没有完成.在CSS中,你可以使用padding-right,但你自然需要在一个元素(通常是span)中包含一个单词或一个字母,这样你就可以将一些东西应用到样式中,例如：
<span style="padding-right: 0.08em">World</span>
要么
<i style="padding-right: 0.08em">World</i>
当然,这很麻烦,特别是因为间距的数量需要取决于最后一个字母(以及字体和下一个字母的第一个字母).或者,您可以使用固定宽度的空格,例如& thinsp;,它对应于铅排版中使用的方法(在打印字母后放置一块狭窄的金属),但这不灵活且不可靠(宽度)这些字符实际上因字体而异).