小技巧助你解决div+css网页内容显示不完整

今天调一个布局,调了老一会没调好,就是内容显示不全,然后突然看到这篇文章 得到点启发,所以转发下支持下  

在测试网页效果时，你是否为网页在IE6版本的浏览器中能正常打开，网页显示完整。而在IE7及以上版本和火狐浏览器中却显示不完整而烦恼呢？如果是的话，今天你来到课课家网站是一个正确的选择。因为今天我们将和大家一起探讨如何解决div+css网页内容显示不完整的问题。

一、初步分析原因

　　俗话说得好，事出有因。那么出现网页在IE7及以上版本和火狐浏览器中显示不完整的原因是什么呢？研究发现，有以下两个：

　　1、css中设置了高度

　　2、设置了overflow:hidden，隐藏超出指定宽度、高度的对象。

　　二、进一步分析原因

　　看到以上两个原因后，你是不会有这样一个疑问。为什么在IE6中设置了高度也能显示完整，而在其它浏览器中却显示不完整？

　　答案是因为IE6内核的原因，你设置了高度，当你内容超出设置高度，它会自然撑破你设置的高度宽度，而在IE7、IE8、火狐等浏览器中将不会撑破设置的高度，这样超出高度的内容也就显示不出来了。

　　三、解决技巧

　　分析出原因之后，事情就好办了。我们可以对症下药进行解决了。

　　1、css中设置了高度

　　既然设置了高度会导致浏览器出现兼容问题，解决还不容易。取消其对象的高度（height）就可以了。这样既可兼容各浏览器，内容也会显示完整。不错这是一个最简单最直接的解决技巧。但有点小遗憾就是取消了高度可能会出网页布局左右内容板块边框不对齐的情况。如果你不想取消高度，就只能采取一个奇葩一点的技巧，就是减少内容，将显示不完整的内容去掉。

　　2、设置了css样式表属性overflow:hidden

　　在一般操作中，我们设置高度同时会设overflow:hidden样式。overflow:hidden的作用是隐藏超出指定宽度、高度的对象。所以我们要检查是否在代码中设置了这个样式。因为如果设置了这个样式，不单单会出现网页在IE7及以上版本和火狐浏览器中显示不完整，连IE6也不能幸免。解决技巧如第一点，取消限制条件或者减少内容。

　　虽然现在的Web开发者都基于高版本浏览器进行开发，完成后再重新兼容IE6，但也不排除维护旧版本网站的需求依然存在。这时候，我们就可以根据新版的Web制作经验来反推只兼容IE6的代码是如何实现出来的。正如本教程所分析出来的原因，就是我们课课家网站反推出来的结果。所以，大家在遇到类似于IE6不同于其它浏览器的差异问题时，都不妨使用反推的技巧，没准问题就能迎刃而解。

http://www.kokojia.com/article/21950.html