• 心得


    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>

  • 相关阅读:
    前端性能优化实战
    开发工具:第四章:Java开发必选工具
    架构:第八章:查询的资料
    java程序员怎么创建自己的网站:第二章:个人博客网站
    技术汇总:第七章:三种验证方式
    技术汇总:第八章:CAS单点登录
    python 中列表和字符串的相互转换
    python 中如何向字典中添加元素
    python 中实现文本的转置
    python 中创建空字典(值为空)的方法
  • 原文地址:https://www.cnblogs.com/ckmouse/p/2159547.html
Copyright © 2020-2023  润新知