Play Google

玩转谷歌--学习笔记,成长历程。

导航

让IE6瞬间崩溃的5种方式

经常遇到莫名其妙让IE6崩溃的事情。今天看到了一篇好文章,我整理整理发上来,以后开发的时候要注意了。

鉴于国内IE6的市场份额还在主流的情况,一定要避免出现以下情况。

IE6真脆弱啊

1.设置scrollbar-base-color,css里给table做了定位,再通过js改变其定位IE6就崩溃了。

关键代码:

<style type="text/css">
  html, body {
    scrollbar-base-color: #330066;
}
.crash {
position:absolute;
left:200px;
top:200px;
width:200px;
}
</style>
 <script type="text/javascript">
    function galgenfrist() {
        window.setTimeout('crashIE();',1000);
    }

    function crashIE() {
        var moveNode = document.getElementById("move");
        if(moveNode) {
            moveNode.style.top = "100px";
            moveNode.style.left = "200px";
        }
    }
    </script>
<body onload="galgenfrist();">
    <div id="move" class="crash">
    <table>
        <tbody>
        <tr>
        <td>
              <textarea></textarea>
        </td>
        </tr>
        </tbody>
    </table>
    </div>
</body>

用IE6点击测试:ie6崩溃测试一

2.document.write

<script>for (x in document.write) { document.write(x);}</script>

在FF和Chrome中,都会打印出“prototype”字符,在IE6中立即崩溃。

用IE6点击测试:ie6崩溃测试二

3.在CSS中使用通配符*,在HTML的table标签中直接放置内容(而不是<tr>标签之类)

<style>*{position:relative}</style><table>aaabbbccc</table>

用IE6点击测试:ie6崩溃测试三

4.CSS中出现@+任意字符+/* 立即崩溃

<style>@;/*</style>

用IE6点击测试:ie6崩溃测试四

5.onload="window()"

<body onload="window()"></body>

用IE6点击测试:ie6崩溃测试五

原文网址:http://www.catswhocode.com/blog/6-html-and-javascript-codes-to-crash-ie6

注:原文中有6个导致崩溃的问题,我装的是IETester,有一个没有测出来。所以没写上来。

jQuery的不足之处

使用Jquery一年多了,对Jquery轻便、易学易用、方便的DOM操作以及这个框架的设计思想都由衷的赞叹。但是Jquery在设计过程中也有一些 不合理的地方(当然,有些东西见仁见智,可能你并不觉得这不合理),今天看到了一篇文章,我做了一下整理。并不是说Jquery很差,让大家不要用,而是 通过这些内容来更好的了解和使用jQuery。

1.each工具的回调函数参数的设计。

2.this指针的变换

3.jquery.inArray(value,array)工具的设计

4.对OO的支持不够

More...

【收藏】详解CSS的优先权

CSS 的优先权

  • 元素的 style 样式属性,加 1,0,0,0。
  • 每个 ID 选择符(#id),加 0,1,0,0。
  • 每个 class 选择符(.class)、每个属性选择符(例 [attr=”"] )、每个伪类(例 :hover),加 0,0,1,0。
  • 每个元素或伪元素(例 :firstchild)等,加 0,0,0,1。
  • 其他选择符(例 全局选择符 *,子选择符 >),加 0,0,0,0。

More...

【收藏】CSS技巧教程资源大全

本文转自帕兰映像,原文网址:http://parandroid.com/60-css-tips-round-up/

 

More...

jQuery新书推荐<<锋利的jQuery>>

朋友出的书,支持一下,很适合Jquery的初学者和急于想上手做东西的人。内容很实用。书中的内容都是通过实例来讲解的,我觉得这点特别好,我学东西就希望能直接做出实例来,有成就感才能刺激继续往下深入。

更多介绍:http://www.cssrain.cn/jquery/index.html

More...

Mashup!Google Map API与饭否API的整合应用

这是一个通过JS 整合两个API 的混搭小应用。

查看这个应用的地址:http://www.playgoogle.com/demo/fanfou/default.htm

More...

给Object扩展extend方法

对对象的extend是一个常用的功能。但 Jquery框架中内置的这个extend有明显的缺陷,那就是不能继承对象中的对象。我的目标就是实现这种对子对象的子属性也一起复制(继承)的功能,不管他嵌套有多深。

More...

深入剖析Jquery中的offset()和position()

jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢?

More...

好友选择器V2.0--基于Jquery

之前发布过一片文章:自己动手做jquery 好友输入提示插件  ,现在这次发布的是增强版,在功能和用户体验等方面多做了改善和拓展。

个人觉得好友选择器是一个比较复杂的组件,涉及到前端和后端的整合。在这里我主要是介绍前段如何实现,后端的数据,我用了几个简单的ASP页面来提供。

 

 查看DEMO   点击下载

More...

帮助避免错误的Javascript陷阱清单(Javascript Gotchas listed to help avoid mistakes)

以后坚持有时间就翻译一下国外的经典文章.每周至少一篇.

原文网址:http://www.webdigi.co.uk/blog/2009/javascript-gotchas-listed-to-help-avoid-mistakes/

翻译讲究"信\雅\达",我就谈不上了.希望能把文章的意思不要弄错就行.

编程的陷阱(gotcha)是指计算机系统中的意想不到的文档特征而不是bug.这些陷阱使得初学者远离javascript编程.在我看来,因为 所有的浏览器都能运行javascript使得它是使用最广泛的语言之一,但它也是最少人研究的.让我们从一个基础的示例开始.

1.浮点运算

这可能是挫败一些对javascript不熟悉并准备执行一些数学运算的人的主要原因.

  1. <script>  
  2. alert(0.02 / 0.1);  //0.19999999999999998   
  3. alert(1.14 * 100);  //113.99999999999999    ;)  
  4. </script> 

Math.round()就能在这里派上用场.

2.加号操作符的重载

"+"加号运算符即能做算术运算,又能够做字符串的连接.如果正确的使用它是很便利的.让我们看一看.

  1. <script>  
  2. var msg, one="1";  
  3. msg = 2 + "1"// msg = "21"  
  4. msg = 2 + one; // msg = "21"  
  5. msg = 1 + 1 + 1 + " musketeers"// msg = "3 musketeers"  
  6. msg = "Bond " + 0 + 0 + 7; //msg = "Bond 007"    
  7. </script> 

上述行为是因为这些运算都是从左到右执行的.类型的转换是基于其中的字符串或数字.

3.行尾插入分号

javascript 自动在行尾插入分号";",让我们来看看这在一个简单的示例中的情况.

  1. <script>  
  2. function returnSame(a){  
  3.    return                 //Inserts semi-colon to convert to return;  
  4.    a                      //a becomes a; - Unreachable  
  5. }  
  6. alert(returnSame(2));  //Output is undefined  
  7. </script> 

当在创建对象或使用对象的值的时候这个神奇的分号能使事情变得更复杂.

4.typeof操作符

typeof 是一个一元操作符,运算结果往往并不是如预期的那样.令人吃惊的是对"null"的运算结果是"object"

  1. <script>  
  2. var obj={};  //object created using object literal  
  3. var arr=[];  //array created by array literal  
  4. alert(typeof(obj));   //object  - Good  
  5. alert(typeof(arr));   //object  - Bad  
  6. alert(typeof(null));  //object  - Ugly!  ;) 
  7. </script>

它仅仅能查找对象的原始类型.

5. false, null, undefined, NaN, Infinity

尽管他们看起来相似,但他们代表着不通的意思.javascript有3种基本数据类型数字numbers, 字符串strings 和布尔 boolean,除此之外还有两个不重要的数据类型"undefine"和"null".按照"=="运算符运算,null和undefine是相等的.

  1. <script>  
  2. var a;  
  3. alert (a);    //undefined  
  4. alert (1/0);  //Infinity  
  5. alert (0/0);  //NaN  
  6. 0/0 == 0/0;   //false - a NaN != NaN  
  7. alert (b);    //error  
  8. </script> 

6.字符串只替换第一个匹配的字符

与PHP或其他程序语言不同,默认情况下,javascript的字符替换只替换第一个出现的匹配的字符.

  1. <script>  
  2. var nospace = "I dont need spaces".replace(" ","_");  
  3. alert(nospace);    //I_dont need spaces   - Only first occurence  
  4. var nospace = "I dont need spaces".replace(/ /g,"_");  
  5. alert(nospace);    //I_dont_need_spaces  
  6. </script> 

 7.parseInt 函数

parseInt 用来将一个字符串转换为整数类型.这个函数能传入两个参数,第二个参数是指定多少进制的.这里十进制用 10 指定.如果没有指定进制,则parseInt函数自己会试图找到合适的进制.如果是这样,以0开头的字符串将会转换为8进制.

  1. <script>  
  2. var str = "017";  
  3. var strInt = parseInt(str);      //strInt = 15  ;)  
  4. var strInt = parseInt(str,10);   //strInt = 17  
  5. </script> 

 

分页:«12345678»
vinehoo,web2.0葡萄酒社区

关于我

play google 网名Karry,07年来上海,先后从事过.Net开发、前端开发,现在在巨人网络任Javascript工程师一职。专注于Javascript编写和用户体验改善。
相信细节决定成败,欢迎志同道合的朋友一起交流。
msn:karry[at]live.cn
email:vinehoo[at]gmail.com
twitter:twitter.com/karryzhang

vinehoo,web2.0葡萄酒社区

Search

BLOG归档

站点统计

  • 文章总数:76
  • 评论总数:52
  • 引用总数:0
  • 浏览总数:27183
  • 留言总数:27
  • 当前主题:Default主题
  • 当前样式:default

图标汇集

    feedsky
    抓虾
    pageflakes
    Rojo
    google reader
    netvibes
    my yahoo
    newsgator
    bloglines
    鲜果
    哪吒
    有道
    QQ邮箱
    九点
  • 本站支持WAP访问
  • 订阅本站的 ATOM 1.0 新闻聚合

playgoogle.com---玩转谷歌,学习笔记,成长历程
Powered By Karry 沪ICP备09012934号

Copyright © 2009 PlayGoogle.com. All Rights Reserved.