最近在查看中国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太严格。
请稍等,评论加载中...