CSS旋转和文本失真 [英] CSS rotation and text distortion

问题描述

创建电子表格样式视图并旋转列会导致文本在Chrome + Firefox中扭曲。我已经设法解决Chrome问题：

Creating a spreadsheet-style view and rotating the column causes the text to distort in Chrome + Firefox. I've managed to work around the Chrome issue using:

-webkit-backface-visibility: hidden;

但是我留在Firefox看起来像这样：

However I'm left with Firefox looking like this :

>

Chrome（修复）

Chrome (with fix)

奇怪的是IE 10完美呈现这种效果，Mac浏览器也能做得更好。

Oddly IE 10 renders this perfectly - and Mac browsers do a better job too.

推荐答案

从Firefox v16开始，Mozilla实现了无前缀的背景可见性属性，可能适用于：

As of Firefox v16, Mozilla implements the unprefixed backface-visibility property, which might work for you:

-webkit-backface-visibility: hidden;    
        backface-visibility: hidden;

IE10也会选择此项。

IE10 will pick this up as well.

有关MDN的详情背面可见性

这篇关于CSS旋转和文本失真的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！