[解決済み] IEでCSS calc()とtransform:translateXを併用することはできません。
質問
すべて
私は私のCSSでtransform:translateXでcalc()を使用できるようにしたいです。
例えば
#myDiv {
-webkit-transform: translateX(calc(100% - 50px));
-moz-transform: translateX(calc(100% - 50px));
transform: translateX(calc(100% - 50px));
}
これは Chrome、Safari、Firefox で完全に動作しますが、IE10 および IE11 では動作しません。
簡単な例をここで見ることができます。 http://jsfiddle.net/SL2mk/9/
これは不可能なことなのでしょうか?IEのバグなのでしょうか、それとも
calc()
はこの文脈では機能しないことになっているのでしょうか?
参考までに - 私が読んだのは
を参照してください。
を読むと、quot;stack" ができることがわかります。
translateX
を重ねることで同じ効果を得ることができ、私のテストではこれを確認することができたようです。すなわち
#div {
transform: translateX(calc(100% - 50px));
}
とは同じです。
#div {
transform: translateX(100%) translateX(-50px);
}
しかし、これが最善で、最も信頼性が高く、将来性のある方法であるかどうかはわかりません。
また、私が知っているのは、このような方法で
left
の代わりに
translateX
の代わりに
アドバイスと洞察に前もって感謝します!
どのように解決するのですか?
これです。
transform: translateX(100%) translateX(-50px);
はパース時にコンパイルされますが、ここでは calc 式を :
transform: translateX(calc(100% - 50px));
は、ブラウザがその値を必要とするたびに解釈されなければなりません。式の結果はキャッシュすることができますが、私はブラウザがそのような最適化を使用することを当てにしません。
というわけで、a) 現在動作している、b) 有効である、c) 仕様が有効になるまで将来も動作する、という意味で最初のものがより優れていると言えます。
関連
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] CSS calc()関数内のSass変数
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] リンクを新しいタブまたはウィンドウで開く[重複]。
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
iframeフレームワークの使用
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] HTMLでBase64画像を表示する方法
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
-
[解決済み] HTML5で(非空白の)自己閉鎖タグは有効ですか?
-
[解決済み] 検索エンジンはAngularJSアプリケーションをどのように扱っているのか?
-
[解決済み] MIME-typeが原因でスタイルシートが読み込まれない
-
[解決済み] div内の画像の下に余分なスペースがある