logo标签列表

在Firefox中使用transform()和calc()函数

cssfirefoxtransform
3
我有点不明白，火狐浏览器是否不支持在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 啊，感谢您找出了这个问题，我现在不觉得自己很蠢了。我会接受那个答案的。 - slartibartfast
1
@Martin 感谢已故的伟大作家道格拉斯·亚当斯 =) - slartibartfast
当然。我听说他因为挪威而获得了一个奖项 ;-) - Martin
我的名字不重要。你必须跟我来，否则你会迟到。迟到什么？嗯，你叫什么名字，地球人？丹特。亚瑟·丹特。好吧，迟到就像是“已故”的丹特阿瑟丹特。这是一种威胁。你明白吗？ - slartibartfast
1个回答
1

问题跟踪器中有一个 Bug 956573 - calc() CSS函数不能使用所有应该支持的数据类型（单位），例如时间（来自2014年，但仍然未解决）。

一条评论（也来自2014年）带有代码片段和评论// calc()目前只允许在其中使用长度和百分比。

由于没有更多的评论表明现在支持更多的单位，并且考虑到评论仍然存在于当前源代码（49.0.1）中，包括进一步的限制请注意，在当前实现中，数字不能与长度和百分比混合使用。我认为情况仍然是这样的，即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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接