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

Question

我正在使用斜体字体样式制作行内块元素动画。刚刚在 chrome 浏览器上注意到一个奇怪的问题。应用 backface-visibility: hidden

时文本部分隐藏

重现此问题。

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

我做了一点fiddle - http://jsfiddle.net/g817g9ph/3/

所有其他浏览器似乎工作正常。伙计们有什么想法吗？

Answer 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 的内容都被隐藏了。

Answer 2

我认为 chrome 在这里工作正常。文本的右侧部分在的边界框之外（添加一个边框，你会看到） - 所以将 backface-visibility 设置为 true 实际上会使任何不在正面的东西不可见......所以你松了文本的结尾。

有关 MDN Page on backface-visibility

的更多信息

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

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

inline-block, italic text partially hides on Chrome with backface-visibility hidden

html

css

google-chrome

css-transforms