在firefox中使用transform()和calc()

时间:2016-10-01 12:53:58

标签: css firefox transform

我是否遗漏了一些明显的东西,或者firefox不喜欢在transform:skewY()中使用calc()?

问题

以下转换有效,没问题:

body article {
    postion:relative;
    top:50%;
    transform-origin:left;
    transform:skewY(-15deg) translateY(-50%);
}

然而尝试使用calc()并不是。虽然chrome没有像预期的那样呈现skew(),但是在任何速率下都不是firefox:

body article {
    postion:relative;
    top:50%;
    transform-origin:left;
    transform:skewY(calc(-1rad * 3.14 / 12)) translateY(-50%);
}

我通常认为这是firefox不做的事情,但是他们的官方文档说:

  

calc()CSS函数可以在需要长度,频率,角度,时间,数字或整数的任何地方使用。

(来源:https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Browser_compatibility

所以我认为这是我的错。任何人都可以在转换中看到语法错误吗?

上下文

<html>
    <body>
        <article>
            <header>title</header>
            <div>article content</div>
        </article

        <!-- more articles... -->

    </body>
</html>

用css看起来像这样:

body {
    white-space:nowrap;
}
body article {
    display:inline-block;
    width:200px;
    height:400px;
}
body article header {
    height:50px;
}
body article div {
    height:calc(100% - 50px);
}

我想要做的是准确排列水平图库中的倾斜元素。我也对任何横向思维开放=)

1 个答案:

答案 0 :(得分:1)

问题跟踪器中有Bug 956573 - calc() CSS function doesn't work with all data types (units) that it should, such as times(从2014年开始,但仍处于打开状态)。

一条评论(也是2014年)的代码剪切了评论// calc() currently allows only lengths and percents inside it.

因为没有进一步的评论,现在有更多的单位支持,并且考虑到评论仍在当前来源(49.0.1)中,包括进一步的限制And note that in current implementation, number cannot be mixed with length and percent.,我会认为它仍然是在这种情况下,Firefox仍然只支持长度和百分比。

if ((aVariantMask & VARIANT_CALC) &&
    IsCSSTokenCalcFunction(*tk)) {
  // calc() currently allows only lengths and percents and number inside it.
  // And note that in current implementation, number cannot be mixed with
  // length and percent.
  if (!ParseCalc(aValue, aVariantMask & VARIANT_LPN)) {
    return CSSParseResult::Error;
  }
  return CSSParseResult::Ok;
}