CSSで期待通りに表示されない根本的な原因の見つけ方

CSSで、期待通りに表示されない、なんかずれてる、ブラウザによって表示が異なる、ということがありませんか？ CSSで期待通りに表示されない時に、根本的な原因を見つける方法を紹介します。 その原因がブラウザによるものなのか、CSSの仕様によるものなのか、どのように機能するか知ることで、問題の根本的な原因を見つけることができます。 Finding The Root Cause of a CSS Bug by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 注意: ここでの「バグ」はエラーだけではなく、想定外の挙動・振る舞いです。 はじめに CSSの基本的なバグ ドロップダウンメニューの配置 HTMLの置換要素 オーバーフロー要素とインラインブロック要素 インラインブロック兄弟間のスペース まとめ はじめに

[coliss]

CSSで期待通りに表示されない時に、根本的な原因を見つける方法。

[sisya]

昔と違って、バグをテクニックで回避するのではなく、理詰めで設定していけば問題が解決できるパターンが多いという点で、状況はよくなったなと思うのだが、複雑さばかりが増してハードルが上がってしまった。

[n314]

10年以上似たようなことやってるような

[eartht]

IE6は横marginが倍、とかのマジなバグに悩まなくて良くなった現在。flexをはじめ、ありがたいものも増えた…

[fujibay1975]

めもめもめも

[fai_fx]

“何時間もかけて調べ、実はSafariだけが正常ではないことに気づくのです。”…これホントそう。未だにSafariのCSSエンジンは改修され続けている。

[mayumayu_nimolove]

デザインを変えると言う選択肢を持っとくのもあり

[k3akinori]

“object-fit”IE11,やはりお前がネックか。。。

[yoiIT]

ハックしまくってどうにかする時代ではなくなっているんだなぁ、、と思って眺めてる。

[ducktoon]

“バグを減らしたのではなく、バグを増やしたことになります”

[masakuma0812]

［トラブル］［対処］［コード］［まとめ］［画像］［背景］［配置］［サイズ］［レイアウト］［Flexbox］［余白］

[Keisuke69]

原因の見つけ方というよりよくある問題とその対応方法って感じの内容だったけど有用

[nmcli]

翻訳文丸出しで読みづらいが、根本的な原因を見つけて対処しようという主旨は分かる