那些年我们一起修改过的iebug和js继承

xiaomiya

浏览: 131867 次
性别:
来自: 杭州

最近访客更多访客>>

makeshow

Rorlay

cutecoot

etracer

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css ie bug 继承

IE6，IE7margin导致下级div出错

<div class="speech" style=“width：100px；margin-left：10px；”>
                <textarea>我也要参与交流</textarea>
      </div>

在ie6，和IE7中，textarea左边也会继承10px 的margin值。

我解决的办法是margin改成padding就可以了。
或者是：

<div class="speech" style=“width：100px；margin-left：10px；”>
<span><textarea>我也要参与交流</textarea></span>
      </div>
在外面加上span就可以了

在网上又找到这样的解释。

代码如下： <div id="div_1" style="margin-left:100px">  <div id="div_2" style="border:1px solid #000;width:100px"><input type="submit" value="button"/></div> </div> 在IE7下出错。我通过div_1是整个内容距离左边100px，结果导致了div_2中的内容又距离左边100px，实际的想过好像是div_1 margin-left：100px同时div_2 padding-left：100px。 如果把div_1的margin改为padding就正常了。 请问这样的问题如何解决

答案：
实际上在IE6已经有这个bug了，但是很不幸IE7继承了IE6的BUG多的优良传统。  就是说你的错误在IE6和IE7下都会产生。  产生这种错误的原因是因为当input仅仅包含父元素，父元素拥有layout，和margin-left属性时，IE6和7的input就会错误的继承margin-left这样的属性。  还是说解决办法吧。 网上总结了很多解决办法，为了不改变你原始父元素的样式定义，推荐的解决办法就是： 给input元素外面套一个span,label这样的内联元素，这样就会消除bug。 原理很简单，input父元素是内敛元素，就不会继承margin-left了。

IE6,7中，li里面的弹出层会被下面的li挡住的bug的解决

一般我们有一个列表，我们用

ul，li来实现，，，

然而，li里面有个<a href="#"><img src="a.jpg"/></a>，我们有一个这样的交互，鼠标放到li里面的a上有个弹出层来显示更详细的信息。

因为我们每个里面都有个这样的<a href="#"><img src="a.jpg"/></a>东西。如果说我们在css样式表中设置ul li｛z-index：9；｝以及弹出层的z-index：99；来提高弹出层的层级使其在最上面。

但是这个时候在IE6，7上有问题了，，，，

我们在第一个li上面的弹出层会被第二个li里面的img挡住。。。

很诡异，这个时候他们只认识，父级的z-index。。li的z-index是一样的，所以他们是平级的，li里面的弹出层不管他的z-index有多高都是li里面小于li的。，所以下面的li里面的img一定在上面。。。

为了处理这个bug我们必须在每个li里面设置他的z-index，从上面到下面依次要低。。。也就是最上面的li的z-index是最大的。。

这样就不会覆盖了。。。

很久以前用到的一种。。图片热点

还没有用到图片热点这个功能，

今天才听说，还挺好用的。适当的情况下用用减少很多时间

<body>

</body>

我们在页面中载入图片之后，在拆分中，点击设计下面的图片

则DW 工具下面会有属性出来。

属性中有地图map，图像热点主要用的就是map属性

我们可以自动选取自己想要的图片中那些点也就是坐标的位置。

则页面中会生成map这一段。

这样我们就可以做链接或者点击某一点的一些动作

下面是js 的继承：

下面是查的，比较完整的，保存起来，，，
JavaScript中要实现继承，其实就是实现三层含义：
1、子类的实例可以共享父类的方法；
2、子类可以覆盖父类的方法或者扩展新的方法；
3、子类和父类都是子类实例的“类型”。

JavaScript中，并不直接从语法上支持继承，但是可以通过模拟的方法来实现继承，以下是关于实现继承的几种方法的总结：
1、构造继承法
2、原型继承法
3、实例继承法
4、拷贝继承法

1、构造继承法：
在子类中执行父类的构造函数。

<SCRIPT LANGUAGE="JavaScript">
 2  <!--
 3        function dwn(s)
 4        {
 5                document.write(s+'<br/>');
 6        }
 7
 8        //定义一个Collection类型
 9        function Collection(size)
10        {
11                this.size = function(){return size};  //公有方法，可以被继承
12        }
13
14        //定义一个_Collection类型
15        function _Collection(_size)
16        {
17                this._size = function(){return _size};  //公有方法，可以被继承
18        }
19
20        Collection.prototype.isEmpty = function()  //静态方法，不能被继承
21        {
22                return this.size() == 0;
23        }
24
25        //定义一个ArrayList类型，它“继承”Colleciton类型
26        function ArrayList()
27        {
28                var m_elements = [];  //私有成员，不能被继承
29                m_elements = Array.apply(m_elements,arguments);
30
31                //ArrayList类型继承Colleciton
32                this.base = Collection;
33                this.base.call(this,m_elements.length);
34
35                this.base = _Collection;                   //可以实现多态继承
36                this.base.call(this,m_elements.length);    
37
38                this.add = function()
39                {
40                        return m_elements.push.apply(m_elements,arguments);        
41                }
42
43                this.toArray = function()
44                {
45                        return m_elements;
46                }
47        }
48
49        ArrayList.prototype.toString = function()
50        {
51                return this.toArray().toString();
52        }
53
54        //定义一个SortedList类型，它继承ArrayList类型
55        function SortedList()
56        {
57                //SortedList类型继承ArrayList
58                this.base = ArrayList;
59                this.base.apply(this,arguments);
60
61                this.sort = function()
62                {
63                        var arr = this.toArray();
64                        arr.sort.apply(arr,arguments);
65                }
66        }
67
68        //构造一个ArrayList
69        var a = new ArrayList(1,2,3);
70        dwn(a);          //1,2,3
71        dwn(a.size());   //3 a从Collection继承了size()方法
72        dwn(a.isEmpty);  //undefined 但是a没有继承到isEmpty()方法
73
74        dwn(a._size());  //3 可以实现多态继承
75
76        //构造一个SortedList
77        var b = new SortedList(3,1,2);
78        dwn(b.toArray());
79        b.add(4,0);    //b 从ArrayList继承了add()方法
80        dwn(b.toArray());  //b从ArrayList继承了toArray()方法
81        b.sort();      //b自己实现sort()方法
82        dwn(b.toArray());
83        dwn(b);
84        dwn(b.size());   //b从Collection继承了size()方法
85  //-->
86  </SCRIPT>

2、原型继承法：

JavaScript是一种基于原型的语言。
要了解什么是“原型继承法”，先了解一下prototype的特性：prototype的最大特性是能够让对象实例共享原型对象的属性，因此如果把某个对象作为一个类型的原型，那么我们说这个类型的所有实例都一这个对象为原型。这个时候，实际上这个对象的类型也可以作为那些以这个对象为原型的实例的类型。
假如：Point类的对象作为Point2D类型的原型（Point2D.prototype = new Point(2)），那么说Point2D的所有实例都是以Point类的对象为原型。此时，实际上Point类就可以作为Point2D类型的对象的类型（相当于Point2D类型“继承”了Point类型）。
见例：

 <SCRIPT LANGUAGE="JavaScript">
 2  <!--
 3        function dwn(s)
 4        {
 5                document.write(s+"<br/>");
 6        }
 7
 8        function Point(dimension)  //定义一个Point类
 9        {
10                this.dimension = dimension;
11        }
12
13        Point.prototype.distance = function() //静态方法，可以被继承
14        {
15                return this.dimension*2;
16        }
17
18        function Point2D(x,y)    //定义一个Point2D类
19        {
20                this.x = x;
21                this.y = y;
22        }
23
24        Point2D.prototype = new Point(2);   //运行“原型继承法”使Point2D继承Point
25
26        function Point3D(x,y,z)   //定义Point3D类
27        {
28                this.x = x;
29                this.y = y;
30                this.z = z;
31        }
32
33        Point3D.prototype = new Point(3);   //Point3D继承Point类
34
35        var p2 = new Point2D(1,2);  //构造一个Point2D对象
36
37        var p3 = new Point3D(1,2,3); //构造一个Point3D对象
38
39        dwn(p2.dimension);            //2
40        dwn(p3.dimension);            //3
41        dwn(p2.distance());           //4 可以继承静态方法
42        dwn(p3.distance());           //6 可以继承静态方法
43
44        dwn(p2 instanceof Point2D);   //p2是Point2D对象
45        dwn(p2 instanceof Point);     //Point2D继承Point,p2是Point对象
46
47        dwn(p3 instanceof Point3D);   //p3是Point3D对象
48        dwn(p3 instanceof Point);     //Point3D继承Point,p3是Point对象
49
50  //-->
51  </SCRIPT>

3、实例继承法

   构造继承法和原型继承法各有各的缺点，如：
   构造继承法没有办法继承类型的静态方法，因此它无法很好的继承JavaScript的核心对象。
   原型继承法虽然可以继承静态方法，但是依然无法很好地继承核心对象中的不可枚举方法。
   其中，javascript核心对象包括：
   Array 表述数组。
   Boolean 表述布尔值。
   Date 表述日期。
   Function 指定了一个可编译为函数的字符串 JavaScript 代码。
   Math 提供了基本的数学常量和函数；如其 PI 属性包含了π的值。
   Number 表述实数数值。
   Object 包含了由所有 JavaScript 对象共享的基本功能。
   RegExp 表述了一个正则表达式；同时包含了由所有正则表达式对象的共享的静态属性。
   String 表述了一个 JavaScript 字符串。
（1）构造继承法的局限性：

（2）原型继承的局限性

 1  <SCRIPT LANGUAGE="JavaScript">
 2  <!--
 3        function MyDate()
 4        {
 5
 6        }
 7        MyDate.prototype = new Date();
 8        var date = new MyDate();
 9        alert(date.toGMTSring());    //'[object]不是日期对象'
10  //-->
11  </SCRIPT>

以上说明了“构造继承法”和“原型继承法”的局限性（局限之一：不能很好的继承核心对象），下面介绍如何用实例继承法来继承核心对象。

在介绍之前首先了解以下关于构造函数：
构造函数通常没有返回值，它们只是初始化由this值传递进来的对象，并且什么也不返回。如果函数有返回值，被返回的对象就成了new表达式的值。

 1  <SCRIPT LANGUAGE="JavaScript">
 2  <!--
 3        function dwn(s)
 4        {
 5                document.write(s+'<br/>');
 6        }
 7        function MyDate()
 8        {
 9                var instance = new Date();   //instance是一个新创建的日期对象
10                instance.printDate = function()  //对日期对象instance扩展printDate()方法
11                {
12                        dwn(instance.toLocaleString());
13                }
14                return instance;   //将instance作为构造函数的返回值返回
15        }
16
17        var date = new MyDate();
18        dwn(date.toGMTString());
19        date.printDate();    
20        dwn(date instanceof MyDate);  //false
21        dwn(date instanceof Date);    //true
22        //对象的构造函数将会是实际构造的对象的构造函数（new Date()），而不是类型本身的构造函数（new MyDate()）
23  //-->
24  </SCRIPT>

4、拷贝继承法

拷贝继承法是通过对象属性的拷贝来实现继承。

1  <script language="JavaScript">
 2        function Point(dimension)
 3        {
 4                this.dimension = dimension;
 5        }
 6
 7        var Point2D = function(x,y)
 8        {
 9                this.x = x;
10                this.y = y;
11        }
12
13    Point2D.extend = function()
14        {
15            var p = new Point(2);
16            for(var each in p)   //将对象的属性进行一对一的复制。
17            {
18                 //this[each] = p[each];
19                 this.prototype[each] = p[each];
20            }
21        }
22    Point2D.extend();
23        //alert(Point2D.dimension);
24        alert(Point2D.prototype.dimension);
25  </script>

5、几种继承方式的比较

比较项	构造继承	原型继承	实例继承	拷贝继承
静态属性继承	N	Y	Y	Y
内置（核心）对象继承	N	部分	Y	Y
多参多重继承	Y	N	Y	N
执行效率	高	高	高	低
多继承	Y	N	N	Y
instanceof	false	true	false	false

分享到：

逐行分析jQuery源码奥秘-1 | js事件监听机制

2013-01-04 17:42
浏览 722
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论