落伍投资在火狐、Chrome下左偏解决办法
概述：
落伍投资网站主体由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;}
最近评论