Chrome截断了左侧类型的部分，firefox和IE显示精细。 Chrome错误？ [英] Chrome cuts off parts of type on the left, firefox and IE display fine. Chrome bug?

问题描述

我有一个带有自定义字体（Didot从Linotype）的斜体样式的常规H3元素。请参阅：

I have a regular H3 element with a custom font (Didot from Linotype) in italic style. See:

问题是Chrome正在裁剪类型的一部分（例如下降和衬线），而其他浏览器显示类型正好。 H3不在任何带有隐藏溢出的容器中。

The issue is that Chrome is clipping parts of the type (such as the descenders and serifs) while other browsers display the type just fine. The H3 is not in any container with hidden overflows.

我试过（没有运气）：

• overflow：visible


• text-rendering：optimizeLegibility; >
  
• * {overflow：visible！important; }


• 其他的字距调整技巧。

• overflow: visible
• text-rendering: optimizeLegibility; (and other values)
• * { overflow: visible !important; }
• Other "kerning" tricks out there

只有解决方案，似乎曾经工作是给H3一些左填充...但我觉得这是一个不适当的解决方案，因为我必须把所有内容下面的标题下相同的金额向右。

The only solution that has appeared to ever work is giving the H3 some left padding... but I feel this is an inappropriate solution as I would then have to shift all contents below headings the same amount to the right.

想法？

推荐答案

看起来文字开始被截断，用于提升元素 RenderLayer 的CSS属性是（例如 transform 或 opacity ）。所以它似乎是渲染器的内部问题，不能在CSS级别轻松修复。我建议只是添加一些左填充（和右填充，如果必要），使所有的字母适合元素边界内，并通过变换或负边距补偿这些paddings。

It appears that the text starts to be cut off when at least one CSS property that promotes the element to RenderLayer is applied (e.g. transform or opacity). So it seems to be the internal problem of the renderer that can't be fixed easily at CSS level. I'd recommend just to add some left padding (and right padding, if necessary) to make all letters fit inside the element boundaries, and compensate these paddings by transform or negative margins.

这篇关于Chrome截断了左侧类型的部分，firefox和IE显示精细。 Chrome错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！