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

Question

我有圆形元素，我用四分之一圆圈来表示进展。在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。

Answer 1

您必须在box-sizing的css中添加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;
}