下面是如解决错乱的方法。
1 float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
2 float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。
3 float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
4 是否重设了默认的样式？
某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
5检查HTML元素是否有拼写错误、是否忘记结束标记
6 是否忘记了写DTD？
如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">
1、首先打开hbuilder软件，新建一个html文件，写入一个p标签，里面写入一句话：
2、然后在上方定义style标签，修改body标签的样式，这里用width属性设置body的宽度为600像素，高度设为1000，居中使用margin属性，最后为了观察效果最后在设置一个宽度为10像素的边框并给边框一个颜色：
3、最后按下Crtl＋S保存，在浏览器中就可以看到自定义宽度并居中的body标签了：
可以采用一下两种方法来自动调节栾杜问题。
1、使用百分比来实现自动适应宽度。
可以设置宽度的值为百分比，如
width=“80%”;
此时宽度就是其父元素的80%宽度。
2、可以采用是js获取屏幕的宽度，以实现宽度随不同分辨率来改变。
先关函数方法如下：
网页可见区域宽 documentbodyclientWidth
网页可见区域高 documentbodyclientHeight
网页可见区域宽(包括边线的宽) documentbodyoffsetWidth
网页可见区域高(包括边线的宽) documentbodyoffsetHeight
网页正文全文宽 documentbodyscrollWidth
网页正文全文高 documentbodyscrollHeight
网页被卷去的高 documentbodyscrollTop
网页被卷去的左 documentbodyscrollLeft
网页正文部分上 windowscreenTop
网页正文部分左 windowscreenLeft
屏幕分辨率的高 windowscreenheight
屏幕分辨率的宽 windowscreenwidth
屏幕可用工作区高度 windowscreenavailHeight
屏幕可用工作区宽度 windowscreenavailWidth
CSS有个overflow，为了让显示不下的内容滚动显示，通常会加上：
overflow: scroll;/ 或者 /overflow: auto;
以前我天真地以为，他们的区别仅仅是，一个始终显示滚动条（overflow: scroll
），一个按需显示滚动条（overflow: auto
）。直到遇到了一个 自适应宽度同时自动显示滚动条 的场景，才发现：
overflow: scroll
情况下，内容自动撑开容器的宽度不包括滚动条，相当于滚动条是一个和内容并列显示的组件。
overflow: scroll
而overflow: auto
情况下，内容撑开容器的宽度包括滚动条，即使用whitespace: no-wrap;
撑开容器至正好显示所有内容时，如果有滚动条，则滚动条会覆盖在内容上方，导致内容宽度再次被缩小，然后出现省略号。由此推测渲染顺序：自适应宽度 → 根据高度显示滚动条 → 重新计算内部元素宽度
这里不会再次自适应，因此出现了内容显示不全的情况。
overflow: auto
总结一下就是，如果宽度是由内容自适应撑开的，则overflow: auto;
带来的滚动条会占用内容的一部分宽度，导致内容显示不全。
那么遇到这种情况，最直接的解决办法就是，强制显示滚动条，这也是我在StackOverflow上找到的回答。然而我并不想就这样屈服，而且在Windows上多显示个不必要的滚动条真的很丑，于是我又使用了一个不走寻常路的方法：
动态获取滚动条的宽度：var scrollbarWidth = containeroffsetWidth - containerclientWidth;// 如果没有滚动条则为0// 否则为滚动条宽度
有滚动条的时候需要在内容右侧加个padding
。测试发现，如果直接把padding加在内容元素上，则内容文字显示全了，但是背景在右侧空出了一块。于是换个思路，用一个占位元素来撑开容器，然后再显示真正想要的内容。
占位元素怎么做？其实很简单，就是把当前容器复制一份，但是给它设置：overflow: hidden; height: 0;
，不受滚动条影响宽度，同时高度为0不可见，然后用JavaScript把第1步计算的滚动条宽度作为padding-right
加上去，这样占位元素的宽度就是我们最后想要的容器宽度，可见部分的内容再自适应就完全没有问题了。
以上就是关于css容器没设置宽度,里面的元素设置百分比偶尔样式错乱全部的内容，包括:css容器没设置宽度,里面的元素设置百分比偶尔样式错乱、js怎么取得文本框的宽度与高度、css中如何定义网页宽度和位置。等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）