心得

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.
浏览器默认不同的字体问题,字体分为“等宽”和“不等宽”字体,所以&amp;在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代码1:

//注意:下面的代码是放在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代码2:

//注意:下面的代码是放在和iframe同一个页面调用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});

 
如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。

注意:只有当在这个元素完全加载完之前绑定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>

posted @ 2011-08-30 14:20  青春无敌小宇宙  阅读(346)  评论(0编辑  收藏  举报