-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%中得到了体现，但在火狐中却不是这样。如果我从宽度和高度减去2*border-width，圆圈适合火狐，而不是Chrome。

Answer 1

您必须在box-sizing的css中添加火狐供应商前缀。我检查过了Firefox 27和它的工作。

这是http://jsfiddle.net/kheema/bwkKb/2/。

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;
}