首页 > 网站建设 > 落伍投资在火狐、Chrome下左偏解决办法

落伍投资在火狐、Chrome下左偏解决办法

2010年1月15日 gavin.chen 发表评论 阅读评论

概述：

落伍投资网站主体由DIV+CSS构建，开发时一直在IE下预览效果，在这过程中没发现有错位的情况。最近通过统计工具发现，使用火狐访问落伍投资的用户比较多，于是安装了火狐测试了一下。测试过程中发现，几乎所有的页面都存在<body><div class=”main”></div>区域左偏的问题。

解决方案：

在CSS文件中，Main的定义如下：

.Main{border-top:1px #c8d8f2 solid;border-bottom:1px #c8d8f2 solid; width:960px;
margin-top:20px;text-align:left;
}

改为：

.Main{border-top:1px #c8d8f2 solid;border-bottom:1px #c8d8f2 solid; width:960px;
margin-top:20px;text-align:left;margin: auto;
}

上传，刷新页面，现在在firefox和chrome下页面显示和在IE中显示效果完全一样了。

解决过程：

这个问题的分析思路很明确，因为顶部导航和Main区域分别是用<div class =”nav_top”>和<div class=”main”>定义的。但是顶部导航区域一切正常，不存在左偏的问题。接下来就分析在CSS文件中nav_top和main的区别。比较发现，nav_top的定义中多了一个关键的：margin: auto;

问题原因：

在FireFox、Chrome中如果 body 设置 了text-align, div 需要设置 margin: auto 才可以居中，这点和IE的解释是不一致的。在落伍投资的CSS文件中，body恰好定义为：

body {text-align:center;background:#ffffff;}

分类: 网站建设 标签: , , ,
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.
注意: 
评论者允许使用'@user:'的方式将自己的评论通知另外评论者。
例如， ABC是本文的评论者之一，则使用'@ABC:'(不包括单引号)将会自动将您的评论发送给ABC。
user必须和评论者名相匹配,区分大小写。

SEO Powered by Platinum SEO from Techblissonline