ブラウザ別に適用させるCSSハック | クロコロール
苦労してコーディングしたページがブラウザによっては表示がおかしい…なんてよくありますよね。 そんな時のために今回は主要ブラウザごとにCSSを適用させるやり方を紹介します。 サンプル 動作確認は以下の環境で行っています。 Google Chrome 120.0 (macOS Ventura) Safari 16.5.2 (macOS Ventura) Opera 106.0 (Windows10) Firefox 119.0 (macOS Ventura) Edge 120.0 (Windows10) Internet Explorer 11.0 (Windows8) この記事を各種ブラウザで見てもらえればボックスの背景色が各々異なるのが確認できます。 Google Chrome, Edge(Chromium), Safari, Opera /* Chrome Edge(Chromium)
FireFoxでinline-blockがカラム落ちする - knowledge base
inline-blockとletter-spacingを同時指定すると崩れる たとえば下図のようなレイアウトを実装すると想定します。 リストを横並びにした、シンプルなレイアウトです。 これをinline-blockを用いて横並びにすると、なぜかFireFoxだけカラム落ちしてしまいました。 実はこれ、inline-block間の隙間を削除するためにlette-spacingで調整をしています。 HTMLは下記の通りです。 <ul class="menu"> <li class="menu__item">Nav Lorem</li> <li class="menu__item">Nav Lorem</li> <li class="menu__item">Nav Lorem</li> <li class="menu__item">Nav Lorem</li> </ul> そして、CSSは下記の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
