上海网站建设整理DIV+CSS网页布局常见问题

网站的访问速度和性能对用户体验来说是非常重要的。如果你的网站访问非常的慢，你不仅会失去用户，而且更可怕的是你会失去潜在的客户。像Google这样的互联网巨头也会把网站访问速度作为排名的一个参数。因此当你需要优化网站速度时，你需要考虑方方面面，每个毫秒。这里对改进网站性能提出一些基础和普遍的建议。

1、如果可能的话，延迟加载一些内容

可以使用Ajax来按需加载部分内容。比如一个相册，可以在用户浏览页面时先出缩略图，当用户点击了，然后异步请求原图并展示，这样用户如果只需要看几张图片，就不需要等待所有图片都加载下来。这种开发模式叫做延迟加载。

Ajax/Web开发类库如jQuery，Prototype，与及MooTools可以使得延迟加载更容易实现。

2、使用外部JS和CSS文件

1、拖动滚动条时边框IE时隐时现，办法：在边框的div中加overflow:hidden; height:100%（IE6.0）

2、li里直接使用img，底部多出几像素，办法：在img中加display:block

3、div浮动左（下）面多出几像素，办法：浮动中加：display:inline（IE6的BUG，margin在碰到float时会距离会加倍，也在浮动元素中加display:inline即可）

4、FF浏览器div内有浮动，顶部多出几像素，办法：在浮动外div中加：display:inline

5、有浮动内容的div在IE6下始终多出几像素空白，办法：加一行div，属性设置为：clear:both; height:0; line-height:0; font-size:0;

6、彻底清除浮动：.Clear{clear:both; font-size:0; height:0; line-height:0;}

7、ul中的li设置float:left后，li内的文字会换行，解决方法：li中加li {      float: left;      white-space: nowrap;即可
值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。  

8、img底部多出几像素，方法，在img元素加属性float:left属性；  

9、在做一个后台布局是用到Tab切换，切换的内容是表格布局的数据，但发现火狐下切换时单元格宽度不能正常显示。（布局时，我在第二个开始的Tab内容加了.Hidden{display:none;}这个class，切换Js设置display属性）。解决办法：将class—Hidden去掉，换成style="display:none;"即可；原来是这个class在作怪。

10、CSS注释，在IE7 FIREFOX下运行正常，在IE6下面竟然一个CSS里设定的格式都么有显示出来。把注释去掉就显示正常了。如果没要用中文注释请将注释改成/*这里是注释内容**********/ 这样就可以显示了
 
 
11、解决使用了float后IE6下li高度比Firefox或者IE8高的问题：在ul的样式表中增加了zoom:1就ok了  

12、要使float元素li不折行，这样做：
    li
    {
        float:left;
        padding-right:16px;
        white-space: nowrap;

       display:inline-block; （不能加overflow:hidden;）

本文由上海网站制作协策网络(http://www.580plan.com/)发表，转载请以链接形式注明出处，谢谢！