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の場合と同様)。
これは(Firefoxの場合のように)見た目が適切ではありません。
誰かがこれを修正する方法を知っていますか?それとも回避策ですか?
追加した-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;
絶対配置がオプションではない場合-ブラウザーのサポートに応じて-display: table-cell
とともに min-width
定義は、必要であるはずですが、トリックも行うかもしれません。
例えば。これは、顧客のロゴがさまざまな画面解像度にうまく対応する行を取得するのに役立ちました。