iPad 上的 CSS 倾斜锯齿状边缘答案

【问题标题】：CSS Skew Jagged Edges on iPadiPad 上的 CSS 倾斜锯齿状边缘
【发布时间】：2013-04-20 00:27:45
【问题描述】：

我有一个网站在设计中广泛使用 CSS 倾斜。使用背面可见性解决了锯齿状边缘问题，iPad 除外。在包括 iphone 在内的所有其他 webkit 浏览器中，边缘都是光滑的，但由于某种原因 iPad 无法正常工作。这是倾斜的代码：

-webkit-backface-visibility: hidden;
-ms-backface-visibility:     hidden;
-moz-backface-visibility:    hidden;
backface-visibility:         hidden;
overflow:                    hidden;

-webkit-transform: skewX(16deg);
-moz-transform:    skewX(16deg);
-ms-transform:     skewX(16deg);
transform:         skewX(16deg);

/* IE8+ */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.28674538575880865, M21=0, M22=1, SizingMethod='auto expand')";

/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.28674538575880865, M21=0, M22=1, SizingMethod='auto expand');

这是网站：acumen.org

【问题讨论】：

标签： css ipad webkit skew

【解决方案1】：

-webkit-backface-visibility: hidden;
-ms-backface-visibility:     hidden;
-moz-backface-visibility:    hidden;
backface-visibility:         hidden;

除此之外，只需添加以下行：

outline: 1px solid transparent;

【讨论】：