在firefox中使用transform()和calc()

本文介绍了在firefox中使用transform()和calc()的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我缺少明显的东西吗，还是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 :

(来源: 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 =)

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()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

percents

在firefox中使用transform()和calc()

问题描述

推荐答案