我是否遗漏了一些明显的东西,或者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);
}
我想要做的是准确排列水平图库中的倾斜元素。我也对任何横向思维开放=)
答案 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;
}