DIV 边距属性在Chrome和IE中的区别深入理解

在一个平静的晚上，我遇到了一个令人头疼的问题。原本在Chrome浏览器下井然有序的网页布局，一到了IE浏览器就变得杂乱无章。为了其原因，我开始调整div标签的background-color属性，意外地发现同一个DIV在IE和Chrome下的宽度竟然不同。这一幕，仿佛遇到了编程世界中的神秘事件，让人心生恐惧。

为了准确找出问题所在，我进行了一系列测试。在编写了一段简单的CSS代码后，我发现了一种现象。当代码为：

```css

div1 { width:960px; margin:0px; padding:0px; }

```

无论在IE还是Chrome浏览器下，div1的总宽度都是一致的，均为960像素。当代码变为：

```css

div1 { width:960px; margin:0px; padding:0px 10px 0px 10px; }

```

在Chrome浏览器中，div1的总宽度居然增加到了980像素，而IE浏览器下的宽度仍然保持960像素。对此，我感到十分困惑。按照我的理解，padding应该被计算在内width之内，但Chrome的处理方式显然与此不同。

不仅如此，我还发现，与padding一样，border和margin的值在Chrome中都被计算在了“width”的外部。而在没有设置float属性的情况下，Chrome会将div1视为具有绝对定位的元素，而IE则将其视为相对定位的元素。这让我更加困惑，也深感浏览器之间的不兼容问题给开发者带来的痛苦。

作为一个初学者，面对这些浏览器之间的差异，我倍感压力。但我相信，只有通过不断学习和实践，才能更好地理解和掌握各种浏览器的特性，从而避免类似的困扰。我也呼吁开发者们能够关注并解决浏览器兼容性问题，为开发者社区创造一个更加友好的环境。

在此，我也分享给大家一个经验：为了避免类似的问题，我们在编写CSS代码时，应尽量明确设置块级元素的float属性为left。这样，或许能减少一些不必要的困扰和麻烦。希望这些经验和发现能对大家有所帮助。