问题

Question

我是否遗漏了一些明显的东西，或者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);
}

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

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

在firefox中使用transform（）和calc（）

问题

上下文

1 个答案: