不思議!? div要素一つで同じスタイルなのに、すべてのブラウザで見た目が異なるスタイルシート

div要素一つで同じスタイルなのに、IE, Edge, Chrome, Safari, Firefoxなどの各ブラウザで見た目が全く異なるスタイルシートを紹介します。

デモのキャプチャ


実際にどのように見えるか、下記ページでご覧ください。

見え方は、ブラウザによって異なります。
最も理想的な見え方は、Edgeです。

各ブラウザでの見え方

各ブラウザでの見え方
※古いバージョンだと、さらにいろいろな状態で表示されます。

コードを見てましょう。
HTMLは、div要素一つのみです。

続いて、CSS。

div要素の見た目が異なる大きな原因は、outlineプロパティの各ブラウザの実装状況です。それに加えて、Chromeでは「vertical-align: middle;」も影響を与えています。

このデモにインスパイアされて、世界中のクリエイターがさまざまなデモをアップしています。

See the Pen vroNqm by Florian Rivoal (@frivoal) on CodePen.

sponsors

top of page

©2018 coliss