CSS3 calc(100%-88px)がChromeで動作しない [重複]。
質問
の使い方に気づいたのですが、CSS3 の
calc()
関数を
width
が最新版のChromeで動作しない。
Chromeのデベロッパーツールで、ルールに
calc()
には
取り消し線
があり、その左側に黄色い三角形のエクスクラメーションマークがあります。これは、プロパティや値が認識されないことを知らせているのです。
どうすればモダンブラウザで動作するようになりますか?プロパティではなく値なので、ベンダープレフィックスはどこに行くのでしょうか。
更新しました。
動かないというのは、Chrome Dev Toolsが私の使い方を認識していないと言っているということです
width: calc(100%-88px);
. どうすれば認識されないとわかるのでしょうか?Chrome Dev Toolsのスタイルルールの横には、取り消し線と黄色の三角形のアイコンが表示されているからです。
どのように解決するのですか?
問題文の問題は、引き算の演算子の周りにスペースがないことが原因でした。
文法では、二項演算子「+」と「-」の周りにスペースが必要であることに注意してください。 演算子の周りにスペースが必要であることに注意してください。と'/'演算子は空白を必要としません。
https://www.w3.org/TR/css3-values/#calc-syntax
これは演算子と符号付き数値の区別を明確にするためだと推測されます。
悪い。
calc(100%-88px)
良いですね。
calc(100% - 88px)
どうして認識されないとわかるのですか?取り消し線が表示されているためです。 と黄色い三角形のアイコンがスタイル ルールの横に表示されるからです。 ツールに表示されます。
というプロパティは <ストライク ストライク であるプロパティは有効であっても上書きされる可能性があります。 と で打たれ、その横に警告の三角形のアイコンがあるプロパティは無効です。
その他の注意事項
-
Chrome は
calc()
に対して をサポートしています。 (OSX と Windows で確認)。 -
クローム
はビューポート単位をサポートしていない可能性があります
内の vh/vw のような
calc()
. 2014年末現在、これを実装する動きがあるようですが 関連するバグ はまだ未解決です。 -
私のテストでは、Safari は
calc()
と共に-webkit
ベンダープレフィックスを使用します。 -
IE9+ がサポートする
calc()
をベンダープレフィックス無しでサポートします。 -
FF がサポートする
calc()
をベンダープレフィックス無しでサポートしています。
関連
-
[解決済み] ChromeでCSSカスタムスタイルのボタンから青枠を削除する
-
[解決済み] グーグルクローム net::ERR_TOO_MANY_RETRIES
-
[解決済み] Chromeの同一生成元ポリシーを無効にする
-
[解決済み] CSS calc()関数内のSass変数
-
[解決済み] ウェブサイト制作のためのChromeキャッシュの無効化
-
[解決済み] 同じ要素にbackground-imageとCSS3グラデーションを組み合わせるにはどうすればよいですか?
-
[解決済み] Chromeデベロッパーツールで:hoverの状態を見る
-
[解決済み】自己署名付きlocalhost証明書をChromeが受け入れるようにする方法
-
[解決済み] URLのロケーションハッシュ「#:~:text=`」とは一体何なのでしょうか?[クローズド]
-
[解決済み] Chromeの "Request Desktop Site "はどのように機能するのですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ResizeObserver - ループの制限を超えました。
-
[解決済み】Chromeデベロッパーツールの==$0(ダブルイコール ドルゼロ)の意味とは?
-
[解決済み】Chromeプッシュ通知。このサイトはバックグラウンドで更新されました
-
[解決済み] ゼロサイズ返信。Squid はこの要求に対してデータを受信しませんでした。
-
[解決済み】印刷プレビューで背景色が表示されない。
-
[解決済み] LessがCSS calc()プロパティをコンパイルしようとするのを防ぐには?
-
[解決済み] Chrome web inspectorのネットワークタブで拡張機能のリソースを非表示にすることは可能ですか?
-
[解決済み] Google Chromeモバイルエミュレータ。キーボードを表示する方法
-
[解決済み] 新しいChromeでドロップダウンメニューを検査する
-
[解決済み] 高さ100%からヘッダーを引く?重複