心得
1.IE6的BUG:ul li 中margin在碰到float时会距离会加倍 解决方法是多加一个无用的CSS定义：display:inline;
2.IE6的BUG:IE6不支持li元素的:hover伪类
3.<script type="text/javascript" src="dateJs/WdatePicker.js" defer="defer"></script>
使用defer属性可以让脚本在整个页面装载完成之后再解析，而非边装载边解析。
这对于只包涵事件触发的js脚本而言，可以提高整个页面的加载速度。
DEFER是脚本程序强大功能中的一个“无名英雄”。你可能从没有使用过它，但是看完这里的介绍后，相信你就离不开它。它告诉浏览器Script段包含了无需立即执行的代码，并且，与SRC属性联合使用，它还可以使这些脚本在后台被下载，前台的内容则正常显示给用户。
最后请注意两点：
1、不要在defer型的脚本程序段中调用document.write命令，因为document.write将产生直接输出效果。
2、而且，不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。
3. 如果不显式声明 defer ，则其默认值 是false
div控制最小高度又自适应高度CSS+div
我们在用div布局的时候经常会遇到这样的一种情况：我们需要设置一个div的高度，当里面的东西超过这个高度时，让这个容器自动被撑开，也就是自适应高度。当里面的信息很少时候，我们就设置它一个最小的固定高度
我们知道，在ie6中，如果子容器的高度超过父容器的时候，父容器会被子容器撑开，所以我们可以直接设置一个height的高度值即可。 但是在ie7和firefox就不行了，它不会自动撑开。
如果要设置自适应高度，我们可以采用height:auto;这个属性；不过这个属性ie6又不支持了。是不是很头痛？其实解决这个问题不难，而且方法也不少，这里推荐一种：(假设我们需要控制的这个div的最小高度是100px，超过时就让里面的信息自动撑开)：
.div{
height:auto !important;
height:100px;
min-height:100px
}
注释：因为 !important在ie7和ff都可以读到，而且权重高于后面的height:100px；所以当在ie7和ff显示的时候，就会用了前面的height:auto !important;而ie6识别不了!important，auto对它也不管用，因此会应用了后面的height:100px的样式；而min-height:100px表示最小高度为100px；此属性在ie7和firefox都可以识别。
这样一个完美的即可以设置最小高度，有可以自适应高度的css样式就出来了，同时兼容了ie6、ie7和firefox！
4.if (top != self) {top.location=self.location;}
5.英文字体方面tahoma 8pt 比较好看 11px
6.div长字母自动换行，兼容ie,firefox
word-wrap:break-word;word-break:break-all;
td中不换行自动隐藏
white-space:nowrap;overflow:hidden;
7.让Div在IE和Firefox下自适应高度
之前遇到Div不自适应高度解决的办法就是在最底下加多个空的Div清除两边的浮动,代码如下:
<div style="clear:both"></div>
不过应用这个方法如果Div嵌套过多中间浮动过于复杂容易使页面乱掉而，最近找到了新的处理办法，就是可以直接在外层想让其"自适应高度"的Div添加以下属性：
style="height:100%; overflow:auto;"
8.IE6下js中onMouseOut事件冒泡的问题
在IE下解决问题很简单，用onMouseEnter、onMouseLeave来代替onMouseOver、onMouseOut就行了，他们的作用基本相同，前者不会发生冒泡。但是firefox下没有这两个事件
9.浏览器检测：
function isIE(){
return navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all;
}
function isIE6() {
return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")=="-1"?false:true;
}
function isIE7(){
return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 7.0")=="-1"?false:true;
}
function isIE8(){
return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 8.0")=="-1"?false:true;
}
function isNN(){
return navigator.userAgent.indexOf("Netscape")!=-1;
}
function isOpera(){
return navigator.appName.indexOf("Opera")!=-1;
}
function isFF(){
return navigator.userAgent.indexOf("Firefox")!=-1;
}
function isChrome(){
return navigator.userAgent.indexOf("Chrome") > -1;
}
10.通过className查找元素
<script>
document.getElementByClassName = function(className,tag)
{
var tag = tag?tag:"*";
var allTags = document.getElementsByTagName(tag);
var tagNums = allTags.length;
var element = [];
var i=0;
for(n in allTags){
current = allTags.item(n);
if(current!=null){//如果当前元素的class不等于null
if(current.className==className)//找到类名为className的dom元素
{
element[i++]=current;
}
}
}
return element;
}
function selectstyle(){
var v=document.getElementById("select1").value;
var els = document.getElementByClassName("hide","div");
for(n in els){
if(v=="2"){els[n].style.display="block"; }
else{els[n].style.display="none";}
}
}
</script>
11.表单文字垂直居中
*{margin:0;}
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
在不断的测试中发现，如果将font-family中的第一个字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。、
试验了一下单选框(radio)，发现，还是有问题。提示文字依然是偏上。用firebug看了一下，发现radio元素默认有5px的左边距和3px的上、右边距，却没有下边距，尝试去掉radio的外边距，刷新后显示正常。（其实多选框checkbox也是有外边距的，只是它的外边距四个方向都有，并且相等，所以对于垂直对齐没有影响。）
12.纯CSS的隔行变色并没有兼容性很好的解决方案
比较好的解决办法还是通过JS+CSS或JQ+CSS的方法。
如定义好了css的class之后如使用jQuery只需要
$("table tr:even").addClass("even");
$("table tr:odd").addClass("odd");
即可.
13.
浏览器默认不同的字体问题，字体分为“等宽”和“不等宽”字体，所以&在IE
与firefox内间距是不等的。
我们需要设置（css中）字体是统一的font-family: 宋体, simsun;
14.iframe在火狐、IE（6、7、8）下自适应高度
<script>
function ReSizeiFrame(iframe)
{
if(iframe && !window.opera)
{
//iframe.style.display = "block";
if(iframe.contentDocument && iframe.contentWindow.document.documentElement.scrollHeight)
{
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;//设置iframe在火狐下高度
}
else if (iframe.Document && iframe.Document.body.scrollHeight)
{
iframe.height = iframe.Document.body.scrollHeight;//设置iframe在ie下的高度
}
}
}
</script>
<iframe src="form.html" width="100%" name="Frame" id="Frame" onload="ReSizeiFrame(this)" ></iframe>
使用jquery方法：
下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。
注意别放错地方了哦。
iframe代码，注意要写ID
<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
jquery代码１：
//注意：下面的代码是放在test.html调用
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});
jquery代码２：
//注意：下面的代码是放在和iframe同一个页面调用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。
15.网页开头声明DOCTYPE为<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">的情况下，文本框的实际高度会比设定值大一些，大约有6px的差距。
16.web网页中插入多个背景音乐程序代码
<embed id="Player" Played="1" src="songlist.m3u" autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" >
另一文件 songlist.m3u
<ASX version="3.0">
<ENTRY>
<REF HREF="music/BrilliantFuture.mp3"/>
</ENTRY>
<ENTRY>
<REF HREF="music/zhdwl.mp3"/>
</ENTRY>
</ASX>
控制播放
<script>
function play(o)
{
if(Player.Played==1)
{
Player.stop();
o.innerHTML="on";
}else
{
Player.play();
o.innerHTML="off";
}
Player.Played=Player.Played==1?0:1;
}
</script>