网站升级兼容firefox经验小谈

最近在查看asp之家的访客统计时，发现访客使用firefox浏览器的占了10％-15％，而大部分的访客使用的是IE6,呵呵我也是用IE6。而当初开发制作asp之家网站时，并没有考虑到使用FireFox(FF)浏览器的用户，而且我的电脑还从没亲密接触过FF，所以也并不知道在FF中是否显示正常。当初的代码开发环境是：FrontPage 2003， 测试是使用MS IE6.0+IIS，页面结构是：css+div。

也许你会问为什么不使用功能更强大的dw呢？呵呵，一.因为我最先学的是FrontPage，其实也谈不上学，只是先安装了FrontPage，也许是先入为主吧！对与后来的dw感觉不是很习惯，只是偶尔用一下。二.我主要是写代码，很少做设计方面的（因为很菜，呵呵） ，个人感觉FrontPage编辑器更适合编写代码，因为界面比较简单。

后来考虑到这10％-15％的ff访客的感受，于是也下载了一个firefox 火狐浏览器。运行后发现还真是很乱。如果照这样下去还真是对不起使用ff浏览器的访客。于是下定决心，在一个无人的周末里升级了网站的CSS，下面就将升级经验写与大家分享：

一.居中问题。

页面在IE中居中的，在FF中并没有居中，这个问题存在于DIV中。这个是影响显示的最主要原因。

解决方法：原来在处理居中时，我只在body中使用了，页面的所有div就都居中了

body { text-align: center; }

而FF中你必须设置每个要居中的div，如某div的class=content那么要居中就要：

.content{margin:0px auto;}

这里margin的值前一个可以按实际需要使用如3px，不是一定要0，后一个要设置为auto，才能居中。

二.文字显示问题

我原来使用了

<div class="list"><ul>
 <li>文章标题</li>
 <li>文章标题</li> 
</ul></div>

来处理文章标题列表，标题居左：

.list{float:left;}

这样标题在IE中就居左了，而FF中显示却乱了，后来我也给LI加上了float:left;，问题解决：

.list li{float:left;}

三.DOCTYPE类型引起的问题

asp之家使用的DOCTYPE是 XHTML 1.0 Transitional。因此也出现了一些代码的兼容性问题。如鼠标样式：原来我使用hand,后来改为pointer：

style="CURSOR: pointer"

因为这里并不支持hand。

js代码问题：原来是

<TEXTAREA name="run_Code">...</TEXTAREA>
<INPUT onclick="runCode(run_Code)" type=button value=运行代码>

现在是：

<TEXTAREA id="run_Code">...</TEXTAREA>
<INPUT onclick="runCode(document.getElementById('run_Code'))" type=button value=运行代码> 

因为在XHTML 1.0 Transitional下是不支持 onclick="runCode(run_Code)" 这样的写法的，FF无法正常运行，当然如果你去掉上面的DOCTYPE声明问题也可以解决。

而IE照样正常运行，不知是IE太宽松还(或者说智能)是FF太严格。