这篇博客探讨了浏览器页面被元素撑开的两个主要原因：元素宽度超过100%和body的外边距。提供了三种解决方案，包括直接调整元素宽度、设置根组件的overflow属性以及使用min-width。每种方法都有其适用场景和潜在的副作用，例如与absolute定位的冲突和对旧版IE浏览器的兼容性问题。
目录
1.原因
原因1
页面中至少有一个元素，宽度大于窗口的宽度（即大于根组件的100%），导致浏览器页面被撑开了。
原因2
查看一下浏览器的body，浏览器可能给body设置了外边距。设置<body style="margin:0;"></body>应该可以解决
2.解决（针对原因一）
方法一
既然已经知道是某个元素的宽度超过100%，直接去找这个元素，将宽度调小。
缺点：万一有很多个元素的宽度都超过100%，都需要调整，会比较麻烦
方法二
给根组件设置overflow:hidden或者overflow-x:hiddden、overflow-y:hidden，根据需求选择
缺点：也不算缺点，只是我遇到的一个问题——会和子元素的position:absolute产生冲突，子元素一直在页面浮动，不符合我的要求
方法三
和方法一差不多，但这里是改变width=100%的元素的宽度，给它设置min-width=超过100%那个元素的宽度，让他俩一样宽
缺点：IE6以下不支持min-width，但应该没什么人用IE6了吧
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
