Image default
Web Design

The div that looks different in every browser

It’s not that Martijn Cuppens used User Agent sniffing, CSS hacks, or anything like that to make this quirk div. This is just a plain ol’

using the outline property a la:

div {
  inset 100px green;
  outline-offset: -125px;
}

It looks different in different browsers because browsers literally render something differently in this strange situation.

I happened upon Reddit user spidermonk33’s comment in which they animated the offset to understand it a bit more. I took that idea and made this little video to show them behaving even weirder than the snapshots.

Direct Link to ArticlePermalink

The post The div that looks different in every browser appeared first on CSS-Tricks.

Related posts

Design Systems at GitHub

KingInExile

Create your own Serverless API

KingInExile

Accessibility for Teams

KingInExile

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More