页面元素的背景及boder被裁掉
这篇讲的是一个跨浏览器的渲染“怪癖”:当浏览器窗口宽度小于页面内容时,横向滚动页面会发现元素的背景和边框被异常裁掉。从IE5到IE8,再到Firefox、Opera、Chrome和Safari,多个主流版本都曾出现这一现象。 文章点出了问题的根源:通常是因为 `body` 的直接子元素设置了 `width: 100%`,或者通过继承获得了 `100%` 的宽度(即未显式定义宽度)。这导致元素宽度与视口绑定,无法随内容自然撑开,在窗口变窄时就容易引发裁切。 作者通过一个简单的 Demo 演示了这个问题,帮助开发者直观地理解这一因宽度定义不当引发的布局陷阱。对于前端开发者来说,这提醒我们在处理容器宽度时需要格外注意继承和百分比值的潜在影响。