-moz-transform 的行为与 -webkit-transform 不同答案

【问题标题】：-moz-transform not behaving the same as -webkit-transform-moz-transform 的行为与 -webkit-transform 不同
【发布时间】：2014-05-04 08:07:07
【问题描述】：

我有圆形元素，我用四分之一圆形填充以显示进度。在 Safari、IE 和 Chrome 中，这些看起来很棒，并按预期填充了圆圈：

但是，当我在 Firefox 中打开同一页面时，转换会失真：

转换代码完全相同。这可能是什么原因造成的？

mc c ftl, mc c ftr, mc c fbr, mc c fbl{
overflow: hidden;
position: absolute;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;

-webkit-transform: rotate(0deg) skewX(0deg);
-moz-transform: rotate(0deg) skewX(0deg);
-ms-transform: rotate(0deg) skewX(0deg);
-o-transform: rotate(0deg) skewX(0deg);
transform: rotate(0deg) skewX(0deg);
}

mc c ftl:before, mc c ftr:before, mc c fbr:before, mc c fbl:before{
box-sizing: border-box;
display: block;
border: solid 10px navy;
width: 200%; 
height: 200%;
border-radius: 50%;

-webkit-transform: skewX(-0deg);
-moz-transform: skewX(-0deg);
-ms-transform: skewX(-0deg);
-o-transform: skewX(-0deg);
transform: skewX(-0deg);

content: '';

position: absolute;
z-index: 999;
}

mc c ftr
{
-webkit-transform: rotate(90deg) skewX(0deg);
-moz-transform: rotate(90deg) skewX(0deg);
-ms-transform: rotate(90deg) skewX(0deg);
-o-transform: rotate(90deg) skewX(0deg);
transform: rotate(90deg) skewX(0deg);
}

mc c fbr
{
-webkit-transform: rotate(180deg) skewX(0deg);
-moz-transform: rotate(180deg) skewX(0deg);
-ms-transform: rotate(180deg) skewX(0deg);
-o-transform: rotate(180deg) skewX(0deg);
transform: rotate(180deg) skewX(0deg);
}

mc c fbl
{
-webkit-transform: rotate(270deg) skewX(0deg);
-moz-transform: rotate(270deg) skewX(0deg);
-ms-transform: rotate(270deg) skewX(0deg);
-o-transform: rotate(270deg) skewX(0deg);
transform: rotate(270deg) skewX(0deg);
}

JSFiddle

更新

所以问题似乎与元素的宽度有关。 Firefox 计算宽度和高度的方式与 webkit 不同吗？也许在 Webkit 中的 width: 200% 中考虑了边界，但在 Firefox 中则不然。如果我从宽度和高度中减去 2*border-width，圆圈适合 Firefox，但不适合 Chrome。

【问题讨论】：

一个 jsFiddle 或类似的会非常方便。
@alex 让我把一个放在一起
@alex 给你：jsfiddle.net/bwkKb/1
我认为$(elm).find(":before").css("border", "10px solid red"); 行不通。
@alex 是的。我删除了那个；无论如何，这对这段代码并不重要。

标签： css firefox transform

【解决方案1】：

您必须在 CSS 中为 box-sizing 添加 Firefox 供应商前缀。我已经检查了它Firefox 27 和它的工作..

这里是 Demo。

mc c ftl:before, mc c ftr:before, mc c fbr:before, mc c fbl:before{
    box-sizing: border-box;
    -moz-box-sizing: border-box; /*Added Mozilla Prefix*/
    display: block;
    border: solid 10px navy;
    width: 200%; 
    height: 200%;
    border-radius: 50%;
    -webkit-transform: skewX(-0deg);
    -moz-transform: skewX(-0deg);
    -ms-transform: skewX(-0deg);
    -o-transform: skewX(-0deg);
    transform: skewX(-0deg);
    content: '';
    position: absolute;
    z-index: 999;
}

【讨论】：