【问题标题】：Using transform() and calc() in firefox在 Firefox 中使用 transform() 和 calc()
【发布时间】：2017-02-09 22:28:12
【问题描述】：

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

问题

以下转换有效，没问题：

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

但是尝试使用 calc() 却没有。无论如何，不在 Firefox 中，尽管 chrome 按预期呈现 skew() ：

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

我想要做的是准确地排列水平画廊中的倾斜元素。我也愿意接受任何横向思考 =)

【问题讨论】：

@t.niese 啊，谢谢你发现这一点，我不觉得很愚蠢。我会接受这个作为答案。
@Martin 感谢已故伟大的道格拉斯·亚当斯 =)
当然。听说他为挪威获奖;-)
我的名字不重要。你必须跟我来，否则你会迟到的。迟到干什么？嗯，嗯，你叫什么地球人？凹痕。亚瑟登特。好吧，就像在已故 Dentarthurdent 一样。这是一种威胁。看到了吗？

标签： css firefox transform

【解决方案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;
}

【讨论】：