内嵌块，斜体文本在 Chrome 上部分隐藏，背面可见性隐藏答案

【问题标题】：inline-block, italic text partially hides on Chrome with backface-visibility hidden内嵌块，斜体文本在 Chrome 上部分隐藏，背面可见性隐藏
【发布时间】：2015-10-29 12:24:05
【问题描述】：

我正在使用斜体字体样式制作内联块元素动画。刚刚注意到chrome浏览器上的一个奇怪问题。应用背面可见性时，文本部分隐藏：隐藏

重现此问题。

font-style: italic;
text-transform: uppercase;
display: inline-block;
backface-visibility: hidden;

我做了一个小小提琴 - http://jsfiddle.net/g817g9ph/3/

所有其他浏览器似乎都可以正常工作。有什么想法吗？

【问题讨论】：

标签： html css google-chrome css-transforms

【解决方案1】：

将padding-right: 3px 添加到a.backface 可以解决此问题，但我不知道这将如何影响您项目的其余部分。

a.backface {
    padding-right: 3px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

Fiddle

似乎backface-visibility:hidden 的行为与overflow:hidden 相同，因为所有不适合原始div 的内容都被隐藏了。

【讨论】：

【解决方案2】：

我认为 chrome 在这里工作正常。文本的右侧部分在的边界框之外（添加边框，您将看到） - 因此将背面可见性设置为 true 实际上会使前面不可见的任何内容......所以你松开了文本的结尾。

有关MDN Page on backface-visibility的更多信息

它确实提出了一个问题，即您为什么要使用实验性 css 规则，并建议 Rvervuurt 的添加填充的答案是一个很好的出路。

【讨论】：