在firefox中使用transform()和calc() [英] Using transform() and calc() in firefox
问题描述
我缺少明显的东西吗，还是firefox不喜欢在transform:skewY()内部使用calc()吗?
Am I missing something obvious, or does firefox not like using calc() inside transform:skewY() ?
以下转换有效，没问题:
the following transform works, no problem :
body article {
postion:relative;
top:50%;
transform-origin:left;
transform:skewY(-15deg) translateY(-50%);
}
但是尝试不使用calc()却没有.尽管chrome可以按预期方式渲染skew()，但在Firefox中没有任何速率:
however trying to use calc() doesn't. Not in firefox in any rate, although chrome renders the skew() as expected :
body article {
postion:relative;
top:50%;
transform-origin:left;
transform:skewY(calc(-1rad * 3.14 / 12)) translateY(-50%);
}
我通常会假设这是firefox不会做的，但是他们的官方文档说:
I would usually assume that this is something that firefox doesn't do, but their official documentation says :
calc()CSS函数可在需要长度，频率，角度，时间，数字或整数的任何地方使用.
The calc() CSS function can be used anywhere a length, frequency, angle, time, number, or integer is required.
(来源: https://developer.mozilla. org/en-US/docs/Web/CSS/calc#Browser_compatibility )
所以我在想这是我的错.有人可以看到转换语法有问题吗?
So I'm thinking that the fault is mine. Can anyone see something wrong with the syntax in the transform ?
<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);
}
我想做的是准确地将水平画廊中倾斜的元素排成一行.我也愿意接受任何横向思考=)
What I'm trying to do is accurately line up the skewed elements in a horizontal gallery. I'm also open to any lateral thinking =)
推荐答案
有错误956573 -calc()CSS函数无法使用它应使用的所有数据类型(单位)，例如问题跟踪器中的时间(从2014年开始，但仍处于打开状态).
There is Bug 956573 - calc() CSS function doesn't work with all data types (units) that it should, such as times (from 2014 but still open) in the issue tracker.
一个注释(也是从2014年开始)的代码中带有注释// calc() currently allows only lengths and percents inside it.
One comment (also from 2014) has a code snipped with the comment // calc() currently allows only lengths and percents inside it.
因为没有进一步的评论，表明现在支持更多的部队，并且考虑到该评论仍在当前资源中(49.0.1)，包括一个进一步的限制，所以我认为情况仍然如此. ，说明Firefox仍然仅支持长度和百分比.
Because there is no further comment that more units are support now and also given the fact that the comment is still in the current source (49.0.1) including a further limitation And note that in current implementation, number cannot be mixed with length and percent. I would assume that it is still the case, that Firefox still does only support lengths and percents.
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()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
