Question

我正在使用斜体字体样式处理内联块元素动画。刚刚注意到Chrome浏览器上的一个奇怪的问题。应用backface-visibility：hidden

时，文本部分隐藏

重现此问题。

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

我做了一点小提琴 - 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在这里正常运作。文本的右手部分位于＆lt; a＆gt;的边界框之外。（添加一个边框，你会看到） - 所以将背面可见性设置为true实际上使得前面的任何东西都不可见......所以你松开了文本的末尾。

有关MDN Page on backface-visibility

的更多信息

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

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

2 个答案: