不思議!? div要素一つで同じスタイルなのに、すべてのブラウザで見た目が異なるスタイルシート
Post on:2018年7月10日
sponsors
div要素一つで同じスタイルなのに、IE, Edge, Chrome, Safari, Firefoxなどの各ブラウザで見た目が全く異なるスタイルシートを紹介します。
実際にどのように見えるか、下記ページでご覧ください。
See the Pen The div that look different in every browser by MartijnCuppens (@MartijnCuppens) on CodePen.
見え方は、ブラウザによって異なります。
最も理想的な見え方は、Edgeです。
各ブラウザでの見え方
※古いバージョンだと、さらにいろいろな状態で表示されます。
コードを見てましょう。
HTMLは、div要素一つのみです。
|
1 2 3 4 5 |
<html> <body> <div></div> </body> </html> |
続いて、CSS。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
html { display: table; height: 100%; width: 100%; } body { display: table-cell; vertical-align: middle; } div { margin: auto; width: 100px; height: 100px; outline: inset 100px green; outline-offset: -125px; } |
div要素の見た目が異なる大きな原因は、outlineプロパティの各ブラウザの実装状況です。それに加えて、Chromeでは「vertical-align: middle;」も影響を与えています。
このデモにインスパイアされて、世界中のクリエイターがさまざまなデモをアップしています。
sponsors
