在每个浏览器上看起来不同的Div

到目前为止，看看每个浏览器看起来不同的div的众所周知的情况。听起来像是一部令人讨厌的侦探小说的开头……

如果你最近在互联网上，你可能听说过在每个浏览器中看起来不同的div。

但如果你还没有或不确定它的全部内容，那就是这种情况：

一个名叫Martin Cuppens的家伙用CSS编写了一个div，它制作了一个相当简单的绿色方块。但是，当您在不同的浏览器中查看它时，它会完全转换为另一种形状。

实际上，几乎每个浏览器都会为您提供与上一个不同的东西。形状的范围从中间有一个孔的正方形到两个绿色正方形到一个实心正方形到原始形状的不同版本。浏览器甚至会影响颜色属性，根据Firefox，Chrome，IE，Edge等更改绿色和色调。您可以在此CrossBrowserTesting屏幕截图测试中看到几个版本：

这种现象在推特，Reddit和HackerNews上有点传染，设计师和开发人员摸不着头脑，检查出了什么问题。

如果您查看CodePen，HTML是非常基本的，但CSS是事情变得更加棘手的地方。如果你有任何CSS经验，你知道这是浏览器渲染可能会失败的地方。

在开发跨浏览器问题时，大多数开发人员都知道这些特性。我们可以从Martin的代码中看到他使用了outline-offset，这似乎是造成这个问题的原因。

由于每个浏览器以不同方式呈现偏移值，因此会根据这些变化的规则使形状变形。

我想知道是否有一种方法可以插入轮廓（如盒子阴影）。转出插图是一种轮廓样式，负轮廓偏移可用于插入轮廓。这些属性的组合导致这个结果，马丁在推特帖子中说道。

那教导我们的是什么？首先，避免轮廓偏移可能是个好主意。但最终，它强化了跨浏览器测试代码的重要性。

Martin的div直观地表示了跨浏览器测试的重要性，以及当代码不能交叉兼容时会发生什么。我们可以清楚地看到，不同浏览器有很多方法可以解释几行代码。

他的例子提供了一个有趣的洞察CSS如何出错，但你不希望这种情况发生在你的Web应用程序中，每个浏览器中的元素看起来都不同。

CSS可能很复杂，但通过在各种浏览器中测试您的网站，您可以避免在没有检查您的网站在Safari中的外观时出现的惊喜。