东子

飞黄腾达

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  12 随笔 :: 0 文章 :: 3 评论 :: 0 引用

公告

2010年8月31日 #

1.在改变单个元素样式时,注意style对象的语法和css中使用的语法几乎是一一对应的。不过包含连字符的属性则被替换为一种“camel castring”的形式,例如:font-size现在成了fontSize,而margin-top变成了marginTop;
2.在使用“float”时,因为“float”是javas
cript的一个保留字,所以就不能使用style.float,而改成了style.cssFloat(IE使用的是style.styleFloat);
3. 获得元素的计算样式:
在W3C DOM下可以:

var heading = document.getElementById("heading");
var computedStyle = document.defaultView.getComputedStyle(heading,null);
var computedFontFamily = computedStyle.fontFamily;//sans-serif
IE不支持使用DOM标准方法,可以:
var heading = document.getElementById("heading");
var computedFontFamily = heading.currentStyle.fontFamily;//sans-serif
 综合上述这些方法,可以创建一个跨浏览器函数来实现
function retrieveComputedStyle(element,styleProperty){
    var computedStyle = null;
    if(typeof element.currentStyle != "undefined"){
        computedStyle = element.currentStyle;
    }else{
        computedStyle = document.defaultView.getComputedStyle(element,null);
    }
    return computedStyle[styleProperty];
}
posted @ 2010-08-31 14:16 Adoner 阅读(69) 评论(2) 编辑

2010年8月26日 #

一个内存释放的实例
<SCRIPT LANGUAGE="JavaScript">
<!--
strTest = "1";
for ( var i = 0; i < 25; i ++ )
{
 strTest += strTest;
}
alert(strTest);
delete strTest;
CollectGarbage();
//-->
</SCRIPT>

CollectGarbage,是IE的一个特有属性,用于释放内存的
使用方法嘛应该是,将该变量或引用对象,设置为null或delete
然后在进行释放动作
在做CollectGarbage前,要必需清楚的两个必备条件:
引用
- 一个对象在其生存的上下文环境之外,即会失效。
- 一个全局的对象在没有被执用(引用)的情况下,即会失效。
========= 美丽的分割线 =========

//---------------------------------------------------------
// JavaScript对象何时失效
//---------------------------------------------------------
function testObject() {
var _obj1 = new Object();
}

function testObject2() {
var _obj2 = new Object();
return _obj2;
}

// 示例1
testObject();

// 示例2
testObject2()

// 示例3
var obj3 = testObject2();
obj3 = null;

// 示例4
var obj4 = testObject2();
var arr = [obj4];
obj3 = null;
arr = [];

在这四个示例中:
- “示例1”在函数testObject()中构造了_obj1,但是在函数退出时,
它就已经离开了函数的上下文环境,因此_obj1失效了;
- “示例2”中,testObject2()中也构造了一个对象_obj2并传出,因
此对象有了“函数外”的上下文环境(和生存周期),然而由于函数
的返回值没有被其它变量“持有”,因此_obj2也立即失效了;
- “示例3”中,testObject2()构造的_obj2被外部的变量obj3持用了,
这时,直到“obj3=null”这行代码生效时,_obj2才会因为引用关系
消失而失效。
- 与示例3相同的原因,“示例4”中的_obj2会在“arr=[]”这行代码
之后才会失效。

但是,对象的“失效”并不等会“释放”。在JavaScript运行环境的内部,没
有任何方式来确切地告诉用户“对象什么时候会释放”。这依赖于JavaScript
的内存回收机制。——这种策略与.NET中的回收机制是类同的。

在前面的Excel操作示例代码中,对象的所有者,也就是"EXCEL.EXE"这个进程
只能在“ActiveX Object实例的释放”之后才会发生。而文件的锁,以及操作
系统的权限凭证是与进程相关的。因此如果对象仅是“失效”而不是“释放”,
那么其它进程处理文件和引用操作系统的权限凭据时就会出问题。

——有些人说这是JavaScript或者COM机制的BUG。其实不是,这是OS、IE
和JavaScript之间的一种复杂关系所导致的,而非独立的问题。

Microsoft公开了解决这种问题的策略:主动调用内存回收过程。

在(微软的)JScript中提供了一个CollectGarbage()过程(通常简称GC过程),
GC过程用于清理当前IE中的“失效的对象失例”,也就是调用对象的析构过程。

在上例中调用GC过程的代码是:
//---------------------------------------------------------
// 处理ActiveX Object时,GC过程的标准调用方式
//---------------------------------------------------------
function writeXLS() {
//(略...)

excel.Quit();
excel = null;
setTimeout(CollectGarbage, 1);
}

第一行代码调用excel.Quit()方法来使得excel进程中止并退出,这时由于JavaScript
环境执有excel对象实例,因此excel进程并不实际中止。

第二行代码使excel为null,以清除对象引用,从而使对象“失效”。然而由于
对象仍旧在函数上下文环境中,因此如果直接调用GC过程,对象仍然不会被清理。

第三行代码使用setTimeout()来调用CollectGarbage函数,时间间隔设为'1',只
是使得GC过程发生在writeXLS()函数执行完之后。这样excel对象就满足了“能被
GC清理”的两个条件:没有引用和离开上下文环境。

GC过程的使用,在使用了ActiveX Object的JS环境中很有效。一些潜在的ActiveX
Object包括XML、VML、OWC(Office Web Componet)、flash,甚至包括在JS中的VBArray。
从这一点来看,ajax架构由于采用了XMLHTTP,并且同时要满足“不切换页面”的
特性,因此在适当的时候主动调用GC过程,会得到更好的效率用UI体验。

事实上,即使使用GC过程,前面提到的excel问题仍然不会被完全解决。因为IE还
缓存了权限凭据。使页的权限凭据被更新的唯一方法,只能是“切换到新的页面”,
因此事实上在前面提到的那个SPS项目中,我采用的方法并不是GC,而是下面这一
段代码:
//---------------------------------------------------------
// 处理ActiveX Object时采用的页面切换代码
//---------------------------------------------------------
function writeXLS() {
//(略...)

excel.Quit();
excel = null;

// 下面代码用于解决IE call Excel的一个BUG, MSDN中提供的方法:
// setTimeout(CollectGarbage, 1);
// 由于不能清除(或同步)网页的受信任状态, 所以将导致SaveAs()等方法在
// 下次调用时无效.
location.reload();
}
========= 美丽的分割线 =========
delete 运算符在手册上的说明
引用
从对象中删除一个属性,或从数组中删除一个元素。

delete expression

expression 参数是一个有效的 JScript 表达式,通常是一个属性名或数组元素。

说明
如果 expression 的结果是一个对象,且在 expression 中指定的属性存在,而该对象又不允许它被删除,则返回 false。

在所有其他情况下,返回 true。
========= 美丽的分割线 =========

最后之最后,关于GC的一个补充说明:在IE窗体被最小化时,IE将会主动调用一次
CollectGarbage()函数。这使得IE窗口在最小化之后,内存占用会有明显改善。
posted @ 2010-08-26 13:12 Adoner 阅读(1026) 评论(1) 编辑

2009年9月8日 #

Code
posted @ 2009-09-08 17:49 Adoner 阅读(14) 评论(0) 编辑

2009年9月2日 #

常见兼容问题:
  1.DOCTYPE影响CSS处理
  2.FF: div设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
  3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
  4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
  5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
  6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了缺点是要控制内容不要换行
  7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
  8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
  9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30px!important;margin:28px;}
  注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}
  重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
  10.IE5 和IE6的BOX解释不一致
  IE5下
    div{width:300px;margin:0 10px 0 10px;}
  div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,
  而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
  11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
  注意事项:
  1、float的div一定要闭合。
     例如:(其中floatA、floatB的属性已经设置为float:left
        <#div id="floatA" ></#div>
        <#div id="floatB" ></#div>
        <#div id="NOTfloatC" ></#div>
  这里的NOTfloatC并不希望继续平移,而是希望往下排。
  这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。
  在
    <#div class="floatB"></#div>
    <#div class="NOTfloatC"></#div>
  之间加上
  <#div class="clear"></#div>
  这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
  并且将clear这种样式定义为为如下即可:
    .clear{clear:both;}
  此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden;
  当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
  例如某一个wrapper如下定义:
    .colwrapper{
        overflow:hidden;
        zoom:1;
        margin:5px auto;
    }
  2、margin加倍的问题
  设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug
  解决方案是在这个div里面加上display:inline;
    例如:
    <#div id="imfloat"></#div>
  相应的css为
    #IamFloat{
        float:left;
        margin:5px;/*IE下理解为10px*/
        display:inline;/*IE下再理解为5px*/}
  3、关于容器的包涵关系
  很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
  4、关于高度的问题
  如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)
  5、最狠的手段 - !important;
  如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下
    .tabd1{
        background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
        background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

  值得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过

 

    Firefox、IE对CSS的兼容性整理
    1、firefox和IE对某些css样式的认定有不少区别,包括:
    ul和ol的默认padding值是不一样的,在Firefox中,padding-left默认值为40px左右,而IE中为0,一般设置ul{margin:0;padding:0;}就能解决大部分问题。
    并列排列的多个元素(图片或者链接)的代码中的空格和回车会造成元素之间的间隙,而在firefox中和IE中显示是不一样的,IE显示空格(约8px)、firefox显示空格(约4px)。
    对不规范代码的兼容情况不同,IE中漏掉的关闭符号对显示不造成影响,而firefox中就会形成错乱的布局。
    firefox对于宽高尺寸的严格解析会造成与设置不匹配(超出)的图片或表格将原设置div撑大。
    未定义id的div,在IE中会与div属性中的其他设置有关,而在firefox中的位置会于div在文件中位置有关,紧随前一个div出现。
    设置为float的div在ie下设置的margin会加倍的,特别是margin-left,这是ie6的一个bug。解决的方法是在这个div里面加上display:inline;
    如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)
    FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行。IE里设置text-align:center,就居中了,但在FF中不行。所以一般两个都要设置。
    FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个height 和 width
    FF对于"!important"会自动优先解析,然而IE则会忽略.如下
    .tabd{
    background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
    background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */
    }
    FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。
    2、针对firefox ie6 ie7的css样式
    现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,
    但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针
    对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
    现在写一个CSS可以这样:
    #1 { color: #333; } /* Moz */
    * html #1 { color: #666; } /* IE6 */
    *+html #1 { color: #999; } /* IE7 */
    那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
    3、firefox下多层嵌套时内层设置了浮动外层设置背景时背景不显示
    这主要是内层设置浮动后外层高度在firefox下变为0,所以应该在外层与内层间再嵌一层,设置浮动和宽
    度,然后给这个层设置背景(听说还有其他方法,感觉还是这方法好使)
    4、属性选择器(这个不能算是兼容,是隐藏css的一个bug
    p[id]{}div[id]{}
    这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
    属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

    5、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案
    <div id="parent">
    <div id="content"> </div>
    </div>
    当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案
    <div id="parent">
    <div id="content"></div>
    <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
    </div>
    在层的最下方产生一个高度为1的空格,可解除这个问题
    编写代码时:对齐时,要将对右的要写在前面。比如:
    <style>
    body{text-align:center;width:100%;}
    #center{margin:0 auto;width:800px;overflow:hidden;}/*这里是居中,超出部分隐藏*/
    .right{float:right;}/*右对齐*/
    .left{float:left;}/*左对齐*/
    .left2{float:inherit;}/*采用继承的方法*/
    #footer{clear:both;}/*清除浮动,防止与顶部层重叠*/
    </style>
    <div id="center">
    <div class="right"></div>
    <div class="left"></div>
    <div class="left2"></div>
    </div>
    <div id="footer"></div>
    ---------用伪类加省略号样式-----------
    比如:
    <style>

    .s_body li{list-style-type:none;}
    .s_body li a{        
                 width:300px;
             overflow:hidden;    
    text-overflow:ellipsis;
    whitewhite-space:nowrap;
             width:auto;
             line-height:150%;
             margin-left:15px;    
         }
             .s_body li a:after{
             content: "...";   }
    </style>
    <ul class="s_body">
    <li><a href="#">内容信息</a></li>
    </ul>
posted @ 2009-09-02 16:25 Adoner 阅读(138) 评论(0) 编辑

1. 超链接访问过后hover样式就不出现的问题
    被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
    Code:
    <style type="text/css">
        <!--
            a:link {}
            a:visited {}
            a:hover {}
            a:active {}
        -->    
    </style>

2. FireFox下如何使连续长字段自动换行
   众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决
   Code:
    <style type="text/css">
    <!--
        div {
            width:300px;
            word-wrap:break-word;
            border:1px solid red;
        }
    -->
    </style>
    <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    Js代码
    <scrīpt type="text/javascrīpt">    
    /* <![CDATA[ */   
        function toBreakWord(el, intLen){    
            var ōbj=document.getElementById(el);    
            var strContent=obj.innerHTML;      
            var strTemp="";    
            while(strContent.length>intLen){    
                strTemp+=strContent.substr(0,intLen)+"    
";
                strContent=strContent.substr(intLen,strContent.length);      
            }
            strTemp+="
"+strContent;
            obj.innerHTML=strTemp;    
        }    
        if(document.getElementById  &&  !document.all)  toBreakWord("ff", 37);    
    /* ]]> */   
    </script>


3.ff下为什么父容器的高度不能自适应
  在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。
  Code:
  clear:both;
4.IE6的双倍边距BUG
  浮动后本来外边距10px,但IE解释为20px,解决办法是加上
  Code:
  display: inline

5. IE6下绝对定位的容器内文本无法正常选择
   此问题在IE6、7中存在,解决问题的办法是让IE进入到qurks mode。关于qurks mode的相关知识,请参考:
   http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true

6. IE6下图片下方有空隙产生
   解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block
   或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom都可以解决.

7. IE6下两个层中间有间隙
   这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

8. list-style-image无法准确定位
   list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决。

9. LI中内容超过长度后以省略号显示的方法
   此方法适用与IE与OP浏览器
   Code:
   <style type="text/css">    
    <! --     
     li {    
       width: 200px;    
       white-space:nowrap;    
       text-overflow:ellipsis;     
       -o-text-overflow:ellipsis;     
       overflow: hidden;    
       }    
    -->    
   </style>

10.web标准中定义id与class有什么区别吗
   一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以  使用他.
   二.属性的优先级问题
      ID 的优先级要高于class,看上面的例子
   三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

11.如何垂直居中文本
   将元素高度和行高设为一致。
   Code:
   <style type="text/css">
    <!--
     div{
      height:30px;
      line-height:30px;
      border:1px solid red
     }
    -->
   </style>

12.如何对齐文本与文本输入框
  加上 vertical-align:middle;
  Code:  
  <style type="text/css">
    <!--
     input {
       width:200px;
       height:30px;
       border:1px solid red;
       vertical-align:middle;
     }
    -->
  </style>

13.FF下面不能水平居中呢
   FF下面设置容器的左右外补丁为auto就可以了
   Code:
   <style type="text/css">
     <!--
      div{
          margin:0 auto;
      }
     -->
   </style>

14.FF下文本无法撑开容器的高度
   标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
   Code:  
   {
      height:auto!important;
      height:200px;
      min-height:200px;
    }

15.IE6下容器的宽度和FF解释不同呢
   Code:
    <?xml version="1.0" encoding="gb2312"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <style type="text/css">
        <!--
        div{
            cursor:pointer;
            width:200px;
            height:200px;
            border:10px solid red
        }
        -->
        </style>
    <div ōnclick="alert(this.offsetWidth)">web标准常见问题大全</div>

    问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考:
    [url]http://www.microsoft.com/china/msdn/library/webservices/asp.net/
    ASPNETusStan.mspx?mfr=true[/url]

16.    为什么web标准中IE无法设置滚动条颜色了
    解决办法是将body换成html
    Code:  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
    <!--
    html {
            scrollbar-face-color:#f6f6f6;
            scrollbar-highlight-color:#fff;
            scrollbar-shadow-color:#eeeeee;
            scrollbar-3dlight-color:#eeeeee;
            scrollbar-arrow-color:#000;
            scrollbar-track-color:#fff;
            scrollbar-darkshadow-color:#fff;
        }
    -->
    </style>

17.    为什么我定义的样式没有作用呢
    这里你无法用.aa定义到li 遇到这种情况怎么解决呢?答案是提高.aa 的优先权 比如#aa ul li.aa
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
        <!--
        #aa ul li {
                color:red
            }
        .aa {
                color:blue
            }
        -->
    </style>    
    <div id="aa">    
    <ul>
    <li class="aa">    
        web标准常见问题大全
    </li>
    </ul>
    </div>

18.    IE6无法定义1px左右高度的容器
    IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

19.    背景颜色无法显示
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
    <!--
    ul {
            background:red
        }
    li {
            float:left;
            width:180px;
        }
    -->
    </style>
    <!--[if lte IE 6]>
    <style>
    .gainlayout { height: 1px; }
    </style>
    <![endif]-->  
    <ul class="gainlayout">
    <li>web标准常见问题大全</li>
    <li>web标准常见问题大全</li>
    <li>web标准常见问题大全</li>
    <li>web标准常见问题大全</li>
    <li>web标准常见问题大全</li>
    <div style="clear:both"></div>
    </ul>
    IE中设置有背景色的ul并没有显示出来,这个属于haslayout问题,解决的办法也很多参考 http://www.satzansatz.de/cssd/onhavinglayout.htm
    解决方法之一:
    Code:
    <!--[if lte IE 6]>
    <style>    
    .gainlayout { height: 1px; }    
    </style>    
    <![endif]-->     
    <!--[if lte IE 6]>
    <style>
    .gainlayout { height: 1px; }
    </style>
    <![endif]-->

20.    怎么样才能让层显示在FLASH之上呢
    解决的办法是给FLASH设置透明
    Code:
    <param name="wmode" value="transparent" />

21.    怎样使一个层垂直居中于浏览器中
    这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
    Code:
    <style type="text/css">    
    <!--     
    div {    
            position:absolute;    
            top:50%;    
            left:50%;    
            margin:-100px 0 0 -100px;    
            width:200px;    
            height:200px;    
            border:1px solid red;    
        }    
    -->    
    </style>

22.    图片垂直与容器内
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <style type="text/css">
    <!--
    * {margin:0;padding:0}
    div {
            width:500px;
            height:500px;
            border:1px solid #ccc;
            overflow:hidden;
            position:relative;
            display:table-cell;
            text-align:center;
            vertical-align:middle
        }
    div p {
            position:static;
            +position:absolute;
            top:50%
        }
    img {
            position:static;
            +position:relative;
            top:-50%;left:-50%;
            width:276px;
            height:110px
        }
    -->
    </style>
    <div><p><img src="logo.gif" /></p></div>

    或者使用背景图的办法:
    Code:
    background:url("logo.gif") center no-repeat;

23.    如何让div横向排列
    横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
    <style type="text/css">    
    <!--     
    div {    
            float:left;
            width:200px;
            height:200px;
            border:1px solid red
        }
    -->
    </style>
    <div>web标准常见问题大全</div>
    <div>web标准常见问题大全</div>

    <div>web标准常见问题大全</div>

24  Firefox 关于DIV高度无法自适应的两种解决
    如果设置了一个DIV的高度,当DIV里实际内容大于所设高度,ie会自动拉伸以适应DIV容器大小,ff会固定DIV的高度,超过部分超出DIV底线以外,
    出现和下面的内容重叠的现象。如果不给DIV设置高度,在Firefox中将不回因为里面的内容而撑开,而IE中就会自动根据内容撑开
    解决方案:
    1、在DIV内部的最后追加clear:both样式

    <div style="background-color:#FF0000;">
        <div style="float:left; height:200px">Jmedia Design</div>
        <div style="float:right; height:800px">www.jmedia.cn</div>
        <div style="clear:both"></div>
    </div>


    2、对DIV使用overflow:auto;

    <div style="overflow:auto;">
        <div style="float:left; background-color:#000000;height:200px">1111111111</div>
        <div style="float:right;background-color:#000000; height:300px"">2222222222</div>
    </div>

posted @ 2009-09-02 14:55 Adoner 阅读(70) 评论(0) 编辑

DOCTYPE用法详解

一、浏览器呈现模式和doctype

有的网页是遵循标准而创作的,但也有很多不是。即使你不能创建遵循标准的网页,也希望浏览器根据标准来正确显示那些页。目前,大量网页充斥着大量非标准代码,它们仍能正常地工作。事实上,为旧版浏览器设计的大多数代码都能在新版浏览器中正确显示(虽然呈现方式可能有所区别)。这是什么原因呢?事实上,假如严格遵循最新标准,会完全破坏那些页的生存基础。对于任何希望有所作为的浏览器来说,这当然是令人无法接受的。

不同网页的不同呈现模式
现代浏览器包括不同的呈现模式,目的是既支持遵循标准的网页,也支持为老式浏览器而设计的网页。其中, Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks (包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。另外,注意Mozilla/Netscape 6新增了一种 Almost Standards (近似标准)模式,用于支持为标准的某个老版本而设计的网页。

什么是 doctype切换?
放在网页顶部的doctype声明是让浏览器进入正确呈现模式的关键。浏览器自动切换到恰当的呈现模式,以便正确显示由doctype声明所指定的文档种类。

理论上,这应该是一个非常直观的切换。假如doctype指出当前网页是一个遵循标准(也就是HTML 4+或XHTML 1+)的文档,浏览器就会切换到Standards模式。假如没有指定doctype,或者指定HTML 3.2以及更老的版本,浏览器就切换到Quirks模式。这样一来,浏览器既能正确显示遵循标准的文档,又不至于完全舍弃老式的、与标准不符的网页。

doctype切换的问题
但是,doctype切换是一个不完善的方案。即使你在Web文档中使用了一个doctype声明,浏览器也可能不会采取你希望的呈现模式来显示网页。原因是多方面的,包括形式错误的doctype,以及不同?xml version="1.0" encoding="UTF-8"?>) 开头,其中包括XHTML网页。然而,IE,Opera和旧版Safari都希望文档的第一行是doctype声明。所以,如果在它之前还有其他任何东西(包括XML prolog),就无法识别doctype。因此,XML prolog的存在会使IE,Opera和Safari进入Quirks模式。XML prolog并非必需的,所以你可在XHTML网页中安全地省略它。注意:一定要在http-equiv meta标记中包括一个charset属性,以弥补XML prolog中缺失的encoding属性。


丢失的URL或者相对URL:
在完整的doctype声明中,要包括相应的文档类型定义(DTD)文件的URL。如果URL丢失,或者指定的是一个相对路径(而不是完全限定的Internet地址),大多数浏览器都会进入Quirks模式,不管doctype声明规定的是什么模式。

形式错误的doctype :
浏览器对doctype声明的形式和格式非常敏感,如果不能识别一个形式错误的doctype,就会强制进入Quirks模式(正是因为这个原因,所以我们建议将一个已知正确的doctype拷贝和粘贴到文档中,而不是亲自输入它)。之所以出现形式错误的doctype,一个常见的原因是在doctype的第一部分与URL之间缺少一个空格。将一个分两行的doctype折叠成单独一行,常常会丢失那个空格。
 
过渡期的 doctype :
浏览器处理过渡期的doctype时,最容易出现不一致的问题。IE和Opera使用Standards模式;Netscape 6和旧版本的Safari使用Quirks模式;Netscape 7、Mozilla 1和新版本的Safari使用Netscape的Almost Standards模式,它是Standards模式的一个具有更好容错性的版本。
未知的 doctype :
浏览器在处理不能识别的doctype时,也存在不一致的现象。IE和Opera会进入Standards模式;换言之,它假定不能识别的doctype是尚未在浏览器中集成的一个新标准。Netscape 6则相反,会在遇到不能识别的doctype时切换到Quirks模式。
doctype切换也许是让浏览器进入正确呈现模式并正确显示网页的一种有效手段,前提是你注意到了各种浏览器的不一致,并能积极主动地避免各种问题。

二、使用正确的doctype声明

我们平时在做页面的时候可能会忽视这一点(包括鄙人,通常都是懒于不写而使用浏览器默认),随着目前网页编码规范化热潮的到来,大家都有必要了解一下这个细节,会有用处的。俗话说没有规矩不成方圆呢。

虽然大多数Web文档的顶部都有doctype声明,但很多人都没有注意它。它是在你新建一个文档时,由Web创作软件草率处理的众多细节之一。

虽然doctype被许多人忽视,但在遵循标准的任何Web文档中,它都是一项必需的元素。doctype会影响代码验证,并决定了浏览器最终如何显示你的Web文档。

doctype的作用

doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下,“阅读程序”通常是浏览器或者校验器这样的一个程序,“规则”则是W3C所发布的一个文档类型定义(DTD)中包含的规则。

每个DTD都包括一系列标记、attributes和properties,它们用于标记Web文档的内容;此外还包括一些规则,它们规定了哪些标记能出现在其他哪些标记中。每个Web建议标准(比如HTML 4 Frameset和XHTML 1.0 Transitional)都有自己的DTD。

假如文档中的标记不遵循doctype声明所指定的DTD,这个文档除了不能通过代码校验之外,还有可能无法在浏览器中正确显示。对于标记不一致的问题,浏览器相较于校验器来说更宽容。但是,不正确的doctype声明经常导致网页不正确显示,或者导致它们根本不能显示。

选择正确的doctype

为了获得正确的doctype声明,关键就是让DTD与文档所遵循的标准对应。例如,假定文档遵循的是XHTML 1.0 Strict标准,文档的doctype声明就应该引用相应的DTD。另一方面,如果doctype声明指定的是XHTML DTD,但文档包含的是旧式风格的HTML标记,就是不恰当的;类似地,如果doctype声明指定的是HTML DTD,但文档包含的是XHTML 1.0 Strict标记,同样是不恰当的。

有的时候,也可以根本不使用一个doctype声明。如果没有指定有效的doctype声明,大多数浏览器都会使用一个内建的默认DTD。在这种情况下,浏览器会用内建的DTD来试着显示你所指定的标记。对于一些临时性的、匆忙拼凑的文档(这种文档有许多),你确实可以考虑省略doctype声明,并接受浏览器的默认显示。

完全可以从头编写一个doctype声明,并让它指向自己选择的一个DTD。然而,由于大多数Web文档都需要遵循由W3C发布的某个国际公认的Web标准,所以那些文档通常都要包含以下标准doctype声明之一:

HTML 2:<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.1 plus MathML plus SVG:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

除了上面列出的doctype声明,具有特殊要求的一些文档还使用了其他几种声明。

doctype声明通常是文档的第一行,要在<html>标记以及其他文档内容之前。注意,在XHTML文档中,doctype的前面偶尔会出现一条XML处理指令(也称为XML prolog):

<?xml version="1.0" encoding="utf-8"?>

为了确保网页正确显示和顺利通过验证,使用正确的doctype是关键。与内容相反的、不正确的或者形式错误的doctype是大量问题的罪魁祸首。在未来的专栏文章中,我还会具体解释如何诊断及纠正这些问题。

用DW设计网页时,新建一个文件,看代码最前面总要出现一个下面的东东,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
这个是DW自动在网页文件页增加了DTD信息,可以删。 删除后,浏览器会使用的默认DTD。


三、选择什么样的DOCTYPE

开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。

查看本页原代码,可以看到第一行就是: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

打开一些符合标准的站点,例如著名web设计软件开发商 Macromedia ,设计大师 Zeldman 的个人网站,会发现同样的代码。而另一些符合标准的站点(例如 k10k.net )的代码则如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd%22%3E!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22%3Ebr>。完整代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%22%3E!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

我们选择什么样的DOCTYPE
理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。

打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。

补充
DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。

四、官方是这样定义 DOCTYPE HTML PUBLIC 的

!DOCTYPE

--------------------------------------------------------------------------------

指定了 HTML 文档遵循的文档类型定义(DTD)。

Microsoft? Internet Explorer 6 的新增内容。你可使用此声明将 Internet Explorer 6 及以后版本切换到标准兼容模式下。

语法

HTML 顶级元素 可用性 "注册//组织//类型 标签//定义 语言""URL"

可能值

顶级元素 指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML 默认。HTML。

可用性 指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC 默认。可公开访问的对象。
SYSTEM 系统资源,如本地文件或 URL。

注册 指定组织是否由国际标准化组织(ISO)注册。 + 默认。组织名称已注册。
- 组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。

组织 指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称,即 OwnderID。 IETF IETF。
W3C W3C。

类型 指定公开文本类,即所引用的对象类型。 DTD 默认。DTD。

标签 指定公开文本描述,即对所引用的公开文本的唯一描述性名称。后面可附带版本号。 HTML 默认。HTML。

定义 指定文档类型定义。 Frameset 框架集文档。
Strict 排除所有 W3C 专家希望逐步淘汰的代表性属性和元素,因为样式表已经很完善了。
Transitional 包含除 frameSet 元素的全部内容。

语言 指定公开文本语言,即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639 语言代码(大写两个字母)。 EN 默认。英语。

URL 指定所引用对象的位置。

注释

此声明必须出现在文档的起始处,出现在 html 标签之前。

!DOCTYPE 元素不需要关闭标签。

此元素在 Microsoft? Internet Explorer 3.0 的 HTML 中可用。

你可使用此声明在 Internet Explorer 6 及以后版本中切换为严格的标准兼容模式。若想打开此开关,请在你的文档顶部包含 !DOCTYPE 声明,在声明中指定合法的标签,在某些情况下,还需要指定定义和/或 URL。

注意 在标准兼容模式下,不能保证与其它版本的 Internet Explorer 保持兼容。当打开标准兼容模式时,文档的渲染行为也许与将来版本的 Internet Explorer 不同。若内容本来就是固定的(如刻录在 CD 上),则不应该使用此模式。

示例

下面的例子演示了如何使用 !DOCTYPE 声明指定文档遵从的 DTD,并将 Internet Explorer 6 及更高版本切换到标准兼容模式。 下面例子中的声明都指定了遵从 HTML 4.0 DTD。第二种声明指定了“Strict”。第一种声明没有指定。这两种声明都将会把 Internet Explorer 6 及以后版本切换到标准兼容模式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

下面例子中的声明都指定了遵从“Transitional”HTML 4.0 DTD。第二种声明指定了 DTD 的 URL。第一种声明没有指定。第二种声明将会把 Internet Explorer 6 及以后版本切换到标准兼容模式。第一种声明不会。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/jom_ch/archive/2007/09/04/1772165.aspx

posted @ 2009-09-02 11:25 Adoner 阅读(86) 评论(0) 编辑

2009年7月24日 #

说明:当没有DOCTYPE声明的时候document.body.scrollTop一切正常
当有DOCTYPE声明的时候document.body.scrollTop总是输出0;
当有DOCTYPE声明的时候document.body.scrollTop总是输出0;
我们必须改用另一个方法:
document.documentElement.scrollTop
我们刚才使用的document.documentElement.scrollTop不能用了,
它总是输出0.
这是我们又想到了 在没有声明的时候,
需要用
document.body.scrollTop
当有DOCTYPE声明的时候,
需要用document.documentElement.scrollTop方法来获取滚动条高度。
当没有声明的时候,用document.body.scrollTop方法。
所以我们需要用到if...else...去判断。
如果有DOCTYPE声明,我们该怎么办,如果没有DOCTYPE声明,我们该怎么办。
var scotop ;
if(document.body.scrollTop){
scotop = document.body.scrollTop;
}else{
scotop = document.documentElement.scrollTop
}
这样判断后,就可以在两种情况下同时使用了。
IE6,IE7,FF2测试通过.
FF3没装,无法测试。
这个方法是google找来的。

Code
程序解释:
解释1:
document.body.scrollTop:就是滚动条顶部到网页顶部的这段距离
window.pageYOffset是NS专用属性,它的含义和IE下的document.body.scrollTop一样 。

解释2:
当文档有了标准声明时, document.compatMode 的值就等于 "CSS1compat",
当没声明的时候, document.compatMode 的值等于 "BackCompat",所以想判断文档是否有声明,
可以这么写:
if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'){
}

解释3:
当文档没有声明的时候,可以用
document.body.scrollTop;来获取滚动条高度。
posted @ 2009-07-24 13:31 Adoner 阅读(1349) 评论(0) 编辑

JS:attachEvent和addEventListener 使用方法
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)

addEventListener方法 用于 Mozilla系列

举例:

Titledocument.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
写成这样:

 

var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
执行顺序为method3->method2->method1

如果是Mozilla系列,并不支持该方法,需要用到addEventListener
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3

使用实例:


1。
var el = EDITFORM_DOCUMENT.body;
//先取得对象,EDITFORM_DOCUMENT实为一个iframe
if (el.addEventListener)...{
 el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent)...{
 el.attachEvent('onclick', KindDisableMenu);
}
2。
if (window.addEventListener) ...{
 window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) ...{
 window.attachEvent('onload', _uCO);
}

 

posted @ 2009-07-24 09:37 Adoner 阅读(1187) 评论(0) 编辑

2009年7月23日 #

摘要: 如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,因为javascript的事件模型有三种,它们分别是NN4、IE4+和W3C/Safari;这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。首先看如下代码: functiondoEventThing(eventT...阅读全文
posted @ 2009-07-23 19:44 Adoner 阅读(70) 评论(0) 编辑

摘要: document.all("htmlControlName");document.getElementsByName("htmlControlName");这两个方法都可以获取页面当中多个Name相同的html控件.例如:页面存在html combobox控件审批<select name="cmbMark" id="V_CUSTOMERORDER_1.CO_CHECK" size="1" s...阅读全文
posted @ 2009-07-23 19:24 Adoner 阅读(724) 评论(0) 编辑

仅列出标题  下一页