Your Site's Appearance Can Vary Greatly from One Browser to Another

Despite all of the internet's struggles to make all websites compatible on all browsers, there are still loads of problems that prevent this from happening, at least automatically. Perhaps this is most evident with a certain innocuous looking bit of CSS code, provided here by a Belgian user named Martijn Cuppens on codepen.io. Despite the fact that this entire example consists of just 18 lines and around 30 words, the result will look dramatically different per user, depending on what internet browser is used to access it.
To save you the trouble of loading up at least five different browsers to see all the possibilities, here's a convenient Twitter tweet from Cuppens showing off this frustrating insanity. (Note: The Firefox example here refers to the Windows version. All Apple iOS browsers have to use the Safari rendering engine, so opening this example on a Firefox browser using an Apple machine will likely display the Safari result.) When asked which example is technically "correct," Cuppens explained that, shockingly, Microsoft's little-used Edge browser does it correctly, at least he thinks.
Cuppens created this monster while attempting to figure out if DIV outlines could be inset, like a box shadow. In his words, it turns out that "inset was [an] outline-style and a negative outline-offset can be used to inset outlines." Confused? You're not alone. Let's break it down a bit to understand what has befallen this hapless programmer.
First, there's really only two lines in this bit of code that are causing the issue: Line 16, which is "outline: inset 100px green;" and line 17, which reads "outline-offset: -125px;". Take these two lines away (you can do this by "commenting" them out; just put two forward slashes at the start of the lines) and you're left with a nice, invisible DIV, ready to accept some code that is hopefully less conflicted.'
If one were to take away line 17, the end result is just a simple green box outline, 100 pixels thick, with the "inset" style, one of eight different types. It's the offset of the inset that mysteriously causes problems. For more information click here https://twitter.com/Martijn_Cuppens/status/1015169981368225793.