从汉诺塔的改进上，说说网页制作和javascript编辑中常见的错误

今天好不容易有了点编程的时间。于是我用了差不多一个小时修改了一下以前编的那个IE Only的网页版汉诺塔。目前它已经可以在Firefox和opera下完美运行了。

从修改的过程中，我发现了以前编这个的时候犯的一些错误。既然我能犯这些错误，那么这些错误就应该是初学者经常容易犯的。现在我把这些常见的错误列出来。

html文件中可能会出的问题

1 不同浏览器中table、p、div的居中问题

在ie中，不管div或其他容器里有什么东西，只要把div加上text-align:center的样式，就能把容器里面的table、p、div等居中显示。而在firefox、opera等中，这样做只能把里面的文字居中显示。

正确的做法是，在不需要left样式进行左边距调整的情况下，把容器里面的table、p、div等加上如下样式：

margin:0 auto 0 auto;

要是需要left属性呢？可以把table等的外面再加上一个div，把这个div设置上面的样式，再把里面的table设置left属性。

<div style="margin: 0px auto; width: 200px; height: 100px;">
<div
style="left:100px;width:100px;position:relative;height:100px;background-color:red">
</div></div>

这样可以实现类似50%+50px的效果。可惜的是这种方法对ie没用。。

难道就没有一种完美的方法么？当然有！看下面一段代码：

<div style="left:50%;margin-left:-50px;width:200px;position:relative;height:100px">
<div
style="left:100px;width:100px;position:relative;height:100px;background-color:red">
</div></div>

看到了什么？完美的50%+100px!

2 背景的高度问题
看看这段代码:

<div style="background-color:black;width:100px;"></div>

在不同的浏览器中会出现什么现象？在ie中，出现了一个黑框，而在firefox中没有出现。

问题就在于没有为div指定height值。指定它或者在div的内容上写个简单的&nbsp;

3 visibility:hidden和display:none的区别

这两个的区别就是visibility:hidden是仅仅隐藏，保留原来的位置。而display:none则是不只隐藏，也去除原来的位置。

javascript中可能会出的问题

1 大小写问题
理论上讲，html是区分大小写的。javascript更是区分大小写的。而且javascript中属性的大小写一般是有规律的。一般首字母是小写，其余单词的首字母是大写。

不过ie似乎对这个不太敏感。。于是造成了这个错误。

2 style属性值的问题
这是个比较严重的问题。稍不留意就容易出错。
left/top之类的属性，用javascript赋值的时候不要只赋值数字，一定要加上"px"。如：

var sp=document.getElementById("sp");
sp.style.left=(nowplace)*266+"px";

这个问题ie也不是很敏感。。。在ie中加不加px效果是一样的。

3 ie和firefox/opera在一些属性方法上的不一致
这个就太多了。也不知道到底谁是标准。所以也只能都照顾到了。
比如说：

function keypress(event)
{
if(hasstarted==false)return;
var c;
//一定要有下面这几句
if(window.event) //ie
c=event.keyCode;
else if(event.which) //firefox/opera
c=event.which;

其他问题

关键词拼写错误

这个问题就得看人品了。。比如说这个汉诺塔，一开始的那个就有一个关键词出现了笔误，造成了一定功能上的缺陷。

解决方法嘛，编程的时候不听歌，不上q，不想作业。

就这些了。我想一个新手成为一个高手必定会经历上述的错误。不过认识到错误，养成好习惯，成为高手也只是时间问题了。

发表评论