web-dev-qa-db-ja.com

FirefoxでCSSスケールを使用すると、要素は元の位置を維持します

Firefoxでスケールを使用すると、スケーリングされた要素が適切にスケーリングされます。問題は、スケーリングされていないかのように配置されていることです。

これはChromeで正常に動作し、おそらくIE、Safari、Operaでも動作します。これらのブラウザはすべてCSSズームプロパティをサポートしていますが、Firefoxはサポートしていません。 Firefoxでは-moz-transform：scale（0.3）;を使用しています。

これは私のCSSです：

#overview .page-content {
    zoom: 0.3;
    -moz-transform: scale(0.3);
}

これは次のようになります（Chromeの場合と同様）。

zoom in chrome

これは（Firefoxの場合のように）見た目が適切ではありません。 scale in firefox

誰かがこれを修正する方法を知っていますか？それとも回避策ですか？

cssfirefoxzoomscale
20
Thomas

thirtydot について：

position: absolute;
-moz-transform-Origin: 0 0;

これでうまくいきます。

32
borisrorsvort

追加した-transform-Origin：0 0;そしてそれはまだ機能しませんでした。

どういうわけかChromeそれは-webkit-transform-Origin：0に折りたたまれました;

だから私はそれを-transform-Origin：左上に変更しました。そしてそれは今うまく機能します。

完全なコード：

-moz-transform: scale(50%);
-moz-transform-Origin: top left;
-o-transform: scale(50%);
-o-transform-Origin: top left;
-webkit-transform: scale(50%);
-webkit-transform-Origin: top left;
5
scabbiaza

絶対配置がオプションではない場合-ブラウザーのサポートに応じて-display: table-cell とともに min-width定義は、必要であるはずですが、トリックも行うかもしれません。

例えば。これは、顧客のロゴがさまざまな画面解像度にうまく対応する行を取得するのに役立ちました。

1
stackasec