浏览器兼容性(手机、电脑。js、html、css)

xiaoxiao2022-07-13 150

浏览器兼容性

13 标准网页布局的兼容性处理

标准网页设计的最大挑战不在于技术本身，而在于浏览器兼容性处理。所谓浏览器兼容问题，就是当我们使用不同的浏览器（如IE 7、IE 6、Firefox等）访问同一个页面时，可能会出现不一致的情况，出现这种现象的原因有很多种，但根本原因就是浏览器对于技术支持的标准不同造成的。

IE浏览器对于标准技术的支持是很不完善的，这些问题可以分为两种：一种是IE支持某种技术或功能，但是实现该功能的方法和途径与标准技术不同；另一种是IE浏览器自身的解析机制存在很多Bug，导致页面解析效果与标准不同。

本章将兼顾IE 6、IE 7和FF三种主流版本或类型浏览器进行讲解，其中IE 6浏览器用户数最多，IE 7的用户将逐步超越和代替IE 6，而FF浏览器代表了标准浏览器的主流。

1 兼容不同类型浏览器的基本方法

不同类型浏览器对于CSS技术的支持是不完全统一的，如果再加上浏览器对于CSS解析时存在各种Bug，CSS兼容性处理就变得异常复杂。

解决浏览器兼容问题的方法，这些方法被称之为Hack（即补丁的意思）。所谓Hack，就是利用各种过滤方法专门为特定类型浏览器定义样式，即称之为过滤器（Filter），从而实现在不同类型浏览器中呈现相同的渲染效果。

过滤器是一种形象的称呼，实际上它就是各种浏览器支持或不支持某种声明或样式的特殊用法。例如，IE 6以下版本浏览器不支持!important关键字，我们就可以利用这个关键字专门为IE 6及其以上版本浏览器或者非IE浏览器定义样式，从而过滤掉IE 6以下版本浏览器在解析时存在的问题。

1 标准网页布局的兼容性处理

1.1 常用过滤器

目前全球设计师发现并总结出来的过滤器非常多，要记住这些过滤器是很繁琐的，读者可以参阅http://centricle.com/ref/css/filters/

1 标准网页布局的兼容性处理

1.1 常用过滤器

http://www.communis.co.uk/dithered/css_filters/css_only/index.html

1 标准网页布局的兼容性处理

1.1 常用过滤器

IE 7版本浏览器专用过滤器

如果专门为IE 7版本浏览器定义样式，则可以使用如下过滤器。该过滤器还可以兼容即将上市的IE 8版本浏览器。

*+html body {

background:blue;

}

</style>

兼容原理：

“*”符号在IE浏览器中被认为是根节点，所以它可以包含html元素，而对于非IE浏览器来说，文档根节点应该是html，而不是“*”，所以当使用“*”通用符号包含html元素时，非IE浏览器会认为它是非法的，从而忽略这个选择器所定义的样式。同时IE 6及其以下版本浏览器不支持相邻选择器（+），所以也会忽略该选择器定义的样式。

1 标准网页布局的兼容性处理

1.1 常用过滤器

IE 6及其以下版本浏览器专用

* html body {

background:red;

}

</style>

不过从语法角度分析，IE 7应该支持*通用符号包含html元素，但事实上并不支持，所以这也是一个很有趣的过滤器。

1 标准网页布局的兼容性处理

1.1 常用过滤器

IE 7和非IE浏览器专用

html>body {

background:green;

}

</style>

兼容原理：

因为IE 6及其以下版本浏览器不支持子选择器，所以会忽略该过滤器定义的样式。

1 标准网页布局的兼容性处理

1.1 常用过滤器

非IE浏览器专用

style type="text/css">

html>/**/body {

background:yellow;

}

</style>

在IE 8中存在问题，需要使用其他方法。

1 标准网页布局的兼容性处理

1.2 使用IE条件语句过滤

IE条件语句是IE浏览器自定义的一套逻辑语句，利用这些语句可以更加有效的为IE系列版本浏览器定义样式。

IE条件语句实际上就是HTML注释语句，只不过在注释标识符中增加了一组关键字，这一组关键字对于IE浏览器来说是有效的，但是对于其他浏览器来说，则被视为注释信息完全忽略。由于IE浏览器能够根据条件语句中设置的条件决定解析的版本，从而实现利用条件为不同IE版本浏览器定义样式的目的。

<!--[if IE]>

<h1>所有IE版本浏览器可识别</h1>

<![endif]-->

1 标准网页布局的兼容性处理

1.2 使用IE条件语句过滤

IE条件语句以中括号（[]）为起止标识符，其中包含一个条件语句。条件语句放在注释标识符内，且与注释标识符内部相邻，语法格式如上面示例。

在条件语句中可以增加修饰性关键字，如lte、lt、gte、gt和!，这些关键字作用说明如下：

lte：小于或等于某个版本的IE浏览器。

lt：小于某个版本的IE浏览器。

gte：大于或等于某个版本的IE浏览器。

gt：大于某个版本的IE浏览器。

!：不等于某个版本的IE浏览器。

2 流动布局的兼容性处理

不同浏览器对于CSS的解析是不同的，这种不同源自不同浏览器的解析机制不同，所以在设计之初读者就应该养成良好的兼容处理习惯，学会直面主流浏览器存在不不兼容性问题，避免后面兼容处理的难度和成本。

目前市场上不同类型或版本的浏览器很多，但是如果从用户数、标准度等方面来比较，其实浏览器市场仅包括两大类型：IE类型和非IE类型浏览器。当大家提及某个页面不兼容，或者出现布局问题，多因为它无法兼容标准浏览器，或者仅支持IE浏览器。而非IE浏览器多建立在标准解析机制之上，所以它们都能够很好支持标准。

本章将以FF（Firefox）浏览器作为非IE的代表，

2 流动布局的兼容性处理

2.1 关于不同浏览器的默认值问题

提及页边距，IE浏览器默认为body元素的margin-left属性进行定义，默认值约为10像素；而对于FF浏览器来说，默认为body元素的padding-left属性进行定义，默认值约为8像素。与此类似的默认值差异设置还包括：

列表样式：IE默认使用margin-left属性定义，值约为40像素；而FF默认使用padding-left属性定义，值约为40像素。

网页居中样式：IE默认使用text-align属性，值为center；而FF默认使用margin属性，设置左右边界为auto。

鼠标指针样式：IE默认使用cursor属性定义，值为hand；而FF默认使用cursor属性，值为pointer。

2 流动布局的兼容性处理

2.2 列表兼容性处理—有序列表高度问题

所谓有序列表高度问题：就是当为有序列表定义高度时，列表序号将显示无效。该现象存在于所有版本的IE浏览器中，非IE浏览器不存在该问题。

如果定义项目符号为拉丁字母等其他有序符号，在IE中会统一显示为点号项目符号，而在非IE下会显示为定义的字母序号显示。

解决方法：

避免使用height定义列表项的高度，改为line-height属性间接定义高度。

2 流动布局的兼容性处理

2.3 列表兼容性处理—列表宽度问题

这个问题存在于所有版本的IE浏览器中。当为列表框定义一个宽度时，在某种情况下，项目符号会突然消失，而在非IE下却能够正常显示。

方法一，定义项目符号位置在内部显示。

方法二，为列表项定义左侧边界大小为2个字体宽度。

方法三，为列表框定义左侧补白为2个字体宽度。

2 流动布局的兼容性处理

2.4 列表兼容性处理—项目符号变异问题

这个问题存在于所有版本的IE浏览器中。当为列表结构中某列表项定义宽度或高度等特殊属性时，有序项目符号会发生混乱，而在非IE下却能够正常显示。

对于此类问题目前还没有好的方法，不过可以通过间接方法来实现。也就是说如果要定义列表项的宽度，不妨给列表项包裹一个外套，然后为外套定义宽度来实现。但是这样做会破坏列表结构的语义性，最佳方法应该是避免为列表项定义高度和宽度，除非不隐藏项目符号的显示。

还有一种方法：取消列表结构的默认项目符号，使用背景图像来定义项目符号，这种做法会更为灵活和个性。

2 流动布局的兼容性处理

2.5 列表兼容性处理—列表行双倍高度问题

个问题存在于IE 6及其以下版本浏览器中。当为列表项中嵌套超链接元素，且定义超链接（a元素）为块状显示（块状显示的目的是可以定义超链接的大小），这时在IE 6及其以下版本浏览器中列表行会显示双倍高度，而在IE 7和非IE下却能够以正常行高显示。

方法一，为列表项定义宽度、高度或边框。

li {border-bottom:1px solid #CCC;} /* 增加底边线 */

或者

li { width:100%;} /* 满宽显示 */

或者

li { height:1.1em;} /* 以行高大小定义高度 */

2 流动布局的兼容性处理

2.5 列表兼容性处理—列表行双倍高度问题

方法二，使用zoom属性。

zoom是IE的私有属性，它能够定义元素的缩放比列。但是它也能够使列表项恢复到正常行高。例如，下面代码可以轻松修正列表项的双倍行高问题，且对于其他版本浏览器没有副作用。

2 流动布局的兼容性处理

2.6 列表兼容性处理—列表项错行问题

这个问题存在于FF浏览器中。当为列表项中嵌套块状元素，且项目符号在内部显示时，FF浏览器中会出现错行问题，而在IE等其他浏览器中却不会出现这类问题。

方法一，定义项目符号显示在列表项的外面。

如果显示在列表项内部，FF会根据块状元素仅能够在一行内显示的原则，从而错行显示。此时即使定义块元素宽度不为100%，它也会错行显示。

li a{/* 列表项包含的块元素 */

display:block; /* 块状显示 */

width:80%; /* 宽度 */

}

2 流动布局的兼容性处理

2.6 列表兼容性处理—列表项错行问题

方法二，定义块元素为行内块状显示，可以清除块状占据一行的问题。

li a{/* 列表项包含的块元素 */

display:inline-block; /* 行内块状显示，清除满行显示 */

}

2 流动布局的兼容性处理

2.7 默认高度问题

这个问题存在于IE 6及其以下版本浏览器中。当定义元素的高度小于元素默认行高时，高度将始终保持默认行高。

解决方法：

定义元素内字体大小为0，这样就清除了行高对于高度的影响。但是不能够定义行高为0，因为字体大小默认为16像素，所以还会影响高度设置，而当字体大小为0时，行高也就没有了。

#bar {font-size:0;}

2 流动布局的兼容性处理

2.7 默认高度问题

如果就这个问题继续探索。当我们定义元素高度为1像素时，则你又会发现：在IE 6及其以下版本中显示为2像素高度，而IE 7和非IE下显示为1像素。

使用CSS定义的overflow属性来裁切多出的高度，代码如下。

#bar {overflow:hidden;} /* 裁切多出区域 */

2 流动布局的兼容性处理

2.8 盒模型高和宽的计算问题

这个问题存在于IE 5.5及其以下版本浏览器中。IE 5.5及其以下版本浏览器认为height和width属性应该包含内容区域的大小、补白区域大小和边框区域大小，通俗说就是元素实际显示的大小。而根据CSS标准，height和width属性值不应该包含补白区域大小和边框区域大小，它仅代表内容区域的大小。

解决此问题方法有多种，但最安全、有效的方法就是使用IE条件语句。把IE条件语句放在原来样式表的底部即可（代码如下），这样就在IE 5.5及其以下版本浏览器中显示与IE 6等其他版本浏览器相同的大小效果。

2 流动布局的兼容性处理

2.9 最小高度和宽度问题

这个问题存在于IE 6及其以下版本浏览器中，准确说这个问题不是Bug，而只是暂时功能不支持，或者说不完善，即IE 6及其以下版本浏览器不支持min-height和min-width属性的问题。

所以，解决方法是：专门为IE 6及其以下版本浏览器定义一个高度，具体代码如下：

* html #box {/* IE6及其以下版本浏览器过滤器 */

height:100px; /* 定义高度为100像素 */

}

2 流动布局的兼容性处理

2.10 超链接兼容处理—失控的子标签问题

这个问题存在于IE 6及其以下版本浏览器中。当在超链接中嵌套一个子标签时，如果希望利用超链接来动态控制子标签的显示样式，就会出现控制失效问题。

这个问题是IE 6及其以下版本浏览器解析超链接的机制造成的，解决方法是：在超链接的鼠标经过状态时定义一个高度，由于a元素默认为行内元素，定义高度后不会影响其显示，但定义高度之后能够触发它正确解析子标签<span>的显示或隐藏。

2 流动布局的兼容性处理

2.11 超链接兼容处理—背景图像代替文本问题

超链接a元素默认为行内显示，由于行内元素不识别盒模型的宽度和高度，所以当为它定义大小时是无效的。如果我们希望使用背景图像来代替超链接文本就会存在很大的问题，实际上设计师经常要面临这样的问题，因为使用背景图像能够设计更具个性的超链接效果。

这种方法利用补白来间接定义元素的大小，并借助font-size属性来间接隐藏字体，从而实现背景图像代替文本的设计效果。

3 浮动布局的兼容性处理

3.1 浮动被流动包含问题

这是所有浏览器都存在的问题，即当一个自然流到的元素包含一个浮动的元素时，则包含元素会自动收缩，而不是被浮动元素撑开。既然所有浏览器都有这个问题，那么法不责众，这个问题也就算不上问题了，或者说它仅是一种现象。

解决方法：

可以使用增加清除浮动元素，强制包含框张开以包含浮动的子元素。

3 浮动布局的兼容性处理

3.1 浮动被流动包含问题

但是如果在IE 6及其以下版本中不完全支持这种方法。而更有趣的是，如果在IE 7浏览器中改变窗口宽度小于包含的浮动元素所定义的宽度时，你会发现包含框所定义的背景色突然没有了，真是让人莫名其妙。

方法：

#wrap { /* 包含框样式 */

background:#FFCCFF;

zoom:1; /* 使用私有属性缩放100%来触发布局 */

}

或者：

#wrap { /* 包含框样式 */

background:#FFCCFF;

border:solid 1px red; /* 定义边框来触发布局 */

}

3 浮动布局的兼容性处理

3.2 包含框不能自适应高度的问题

这个现象本应属于流动布局问题，因为与上一节示例存在问题有点类似，故放在这儿进行讲解。该问题存在于所有浏览器中。当为包含框内的元素定义上下边界时，包含框不能够自适应高度以包含子对象。

存在原因：

如果嵌套元素的边界没有被相互阻隔，则就会出现边界重叠现象。例如，被包含元素的上边界会自动与包含框的上边界重叠，被包含元素的下边界会自动与包含框的下边界重叠。

解决方法：

为包含框定义边框或者补白，从而阻断相互嵌套元素的上下边界接触，防止发生重叠现象，则阻断边界接触。

3 浮动布局的兼容性处理

3.3 浮动布局中栏目内容被隐藏的问题

这个问题存在于IE 6及其以下版本浏览器中。有人把这个问题称之为躲猫猫或捉迷藏。之所以这样称呼，是因为在特定条件下栏目内容看起来消失了，只有重新刷新页面时才能够出现，或者用鼠标拖选可以使其显示。

3 浮动布局的兼容性处理

3.3 浮动布局中栏目内容被隐藏的问题

出现这个Bug的原因比较特殊，一般需要几个前提条件：

第一，包含框中包含有浮动元素和流动元素，且包含框定义了背景色。

第二，浮动元素后面为一些流动元素，浮动元素的高度应该大于后面流动元素的高度。

第三，在流动元素的下面是一个清除元素（即元素定义清除浮动属性），或者是一个被定义了宽度且宽度足以促使元素只能够显示在浮动元素的底部，而不是环绕在浮动元素的两侧。

当满足上面三个条件，则中间的流动元素（环绕在浮动元素两侧的元素）看起来似乎消失了，原来它们都隐藏到了父元素的背景后面，只有在刷新页面时才重新出现。

3 浮动布局的兼容性处理

3.3 浮动布局中栏目内容被隐藏的问题

方法一，学会在浮动元素后面增加清除元素。所谓清除元素，就是定义了clearr属性的元素，这样就可以避免浮动元素对后面布局的影响。

方法二，在结构嵌套中应遵循最少的层次来满足页面设计需要，使页面结构简单，容易控制与管理，尽可能的减小由于不必要的嵌套引来的Bug。

3 浮动布局的兼容性处理

3.4 同时设置边界和浮动布局的问题

这个问题存在于IE 6及其以下版本浏览器中。出现这个问题需要具备两个前提条件：

第一，元素同时被定义了边界和浮动显示，且浮动方向和定义边界方向在一个方向。

第二，浮动边相邻的是一个流动元素或包含框，而不是浮动元素。

当满足这两个条件之后，所定义的边界会加倍显示。

解决该问题方法比较简单：

3 浮动布局的兼容性处理

3.5 半个像素问题

这个问题存在于所有IE浏览器版本中。我们知道像素值是没有小数值的，但是当在布局中使用百分比设置单位，就会存在计算的像素值出现小数部分。对于小数值问题，不同类型浏览器取舍方法不同：

IE将根据四舍五入的方法进行计算。例如，假设值为10.5像素，则IE在解析时会根据四舍五入的方法，计算为11像素，而对于值为10.4像素，则计算结果为10像素。

FF等标准浏览器对于小数值一般采取忽略不计的方法，多出的值将按元素顺序进行分配。例如，包含框宽度为11像素，平分为3个子元素，则每个子元素平分3像素，多出的2像素按顺序分给第1、2个子元素。如果包含框宽度为10像素，则每个子元素平分3像素，多出的1像素分给第1个子元素。

3 浮动布局的兼容性处理

3.5 半个像素问题

解决方法：

这是一个比较特殊的问题，最佳方法当然是避免此类问题的出现，即不要设置包含框宽度为一个奇数值。不过在布局中很多取值是无法预定的，所以使用下面这个方法是最安全的。即为包含的子元素定义清除右侧浮动。

13-44.html

这样它就能够强迫所有的子元素并列显示。其实clear:right;声明是一个比较神奇的工具，对于IE浏览器来说，不管所包含的子元素宽度有多大，它都能够强迫子元素在同一行内显示。

3 浮动布局的兼容性处理

3.6 3像素问题

这个问题存在于IE 6及其以下版本浏览器中。当浮动元素与流动元素并列显示时，它们之间会存在3像素的间距。

解决方法：

利用IE 6及其以下版本浏览器的过滤器，专门为它们定义样式实现与标准浏览器的兼容。

3 浮动布局的兼容性处理

3.7 多出字符问题

这个问题存在于IE 6版本浏览器中。当多个浮动元素中间夹杂有HTML注释语句时，如果浮动元素宽度为100%，则就会在下面一行多显示一个上一行最后一个字符。

解决方法：可以清除注释语句即可。

4 定位布局的兼容性处理

4.1 定位参照物的问题

这个问题存在于IE 6及其以下版本浏览器中。当定义行内元素为包含块时，且包含块包含的绝对定位元素以百分比为单位进行定位时，就会出现参照物混乱现象。

解决此类问题的方法很简单，直接为span增加zoom属性，该属性能够触发span自动布局，而从促使绝对定位元素以span元素为参照物进行定位。

4 定位布局的兼容性处理

4.2 定位元素的结构与层叠问题

这个问题存在于所有IE版本中。当定位元素位于不同的结构中时，它们之间的层叠顺序就不能够简单使用z-index属性来控制。定位元素的层叠顺序还要受结构关系的影响。

问题原因：

IE浏览器能够根据相同结构层次的定位元素进行比较，如果不在同一个结构层次，则先比较相同层级的父元素，谁的父元素z-index属性值大谁就在上面，而不管其子元素的z-index属性值有多大。

在上面示例中，蓝盒子的层叠顺序为1，而红盒子的包含块层叠顺序为0（默认值），由于蓝盒子与红盒子的包含块属于同一个层级，所以蓝盒子就会覆盖红盒子的包含块。这样即使红盒子的层叠顺序值为多大都将被覆盖在下面。这个规则对于非IE浏览器来说是无效的。

解决方法：为红盒子的包含块定义较大的层叠值。

4 定位布局的兼容性处理

4.3 定位元素丢失问题

这个问题存在于IE 6及其以下版本浏览器中。当在一个包含块内并列浮动几个元素，它们的宽度之和整好等于包含块的宽度，这时如果在包含块内嵌入绝对定位元素，则该定位元素就会丢失。

方法一，通过为每个栏目收缩一个像素边界，从而显示丢失的绝对定位元素。

方法二，受上面方法的启发，我们也可以不定义负边界，而直接为包含块定义多出3像素。这个3像素是根据所包含的栏目块来定的，如果仅包含两个栏目块，则应该是2像素。

4 定位布局的兼容性处理

4.3 定位元素丢失问题

方法三，上面两种方法都是通过加宽或收缩边界的方法，为定位元素腾出一点空间，从而诱发它显示出来。我们也可以为包含的最后一个子栏目使用绝对定位，从而避免浮动元素占满整个包含块的空间。

方法四，我们也可以在浮动元素和绝对定位元素之间增加一个清除浮动元素，从而强迫定位元素与浮动元素位于不同行中，从而显示出来。

PC端多行文本慎用，火狐IE不支持。

不兼容浏览器问题概要问题描述解决方法IE6，IE7 3px 并列一行的元素左侧第一个元素没浮动，第二个元素左浮动，则两个元素之间会多3像素空隙并在一行的元素如果有一个元素有浮动，则都加浮动IE6，IE7下折行并列一行的元素左侧元素没浮动，右侧元素右浮动，则右侧浮动元素向下折行并在一行的元素如果有一个元素有浮动，则都加浮动IE6双边距块属性标签浮动，并且有横向margin值，横向margin加倍块元素添加display：inlineIE6，IE7lili无浮动,li内部元素有浮动,li下会多出来3px左右的间隙给li添加vertical-align:top 或给li添加浮动IE6最小高度最小高度不小于19px设置 overflow:hidden得到高度为设置的heightIE6最小高度+li当最小高度问题和 li 的间隙问题共存的时候只能给li添加浮动，且添加overflow：hiddenIE6，IE7图片间隙图片下有间隙给图片添加vertical-alignIE6margin消失当一行子元素占有的宽度之和，和父级的宽度相差超过3px，或者有不满行状态的时候，最后一行子元素的下margin在IE6下就会失效尽量避免该情况IE6文字溢出子元素的宽度和父级的宽度相差小于3px的时候，两个浮动元素中间有注释或者内嵌元素文字莫名其妙多出几个用div把注释或者内嵌元素包起来IE6浮动与绝对定位当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失把绝对定位元素套个div,或在添加zoom:1;触发layoutIE6Fiexd不支持固定定位 position：fiexd；需要配合JS计算滚动尺寸实现兼容IE6溢出父级的 overflow:hidden; 包不住子级的relative;给父级也添加relativeIE61px定位元素的父级宽高都为奇数那么定位元素的 right 和 bottom 都有1像素的偏差。尽量避免改情况IE6，IE7表单高度表单元素select/option 下拉选框对高度的支持不兼容通常不设置高度IE6，IE7textarea各个浏览器下的默认滚动条显示不兼容添加 overflow：auto；IE6，IE7textareacss3新增 resize 调整尺寸属性；resize：none；不能自由拖动改变尺寸，IE6input背景滚动input背景随着内容增多而移动在input外面添加一个div，div上设置背景，或者添加给其父级，input全部透明IE6撑开父级宽度子级宽度如果超过父级宽度，会撑开父级宽度，而其它浏览器不会撑开父级宽度需要精确计算好IE6Fiexd不支持固定定位 position：fiexd；需要配合JS计算滚动尺寸实现兼容IE6溢出父级的 overflow:hidden; 包不住子级的relative;给父级也添加relativeIE61px定位元素的父级宽高都为奇数那么定位元素的 right 和 bottom 都有1像素的偏差。尽量避免改情况IE6，IE7表单高度表单元素select/option 下拉选框对高度的支持不兼容通常不设置高度IE6，IE7textarea各个浏览器下的默认滚动条显示不兼容添加 overflow：auto；IE6，IE7textareacss3新增 resize 调整尺寸属性；resize：none；不能自由拖动改变尺寸，IE6input背景滚动input背景随着内容增多而移动在input外面添加一个div，div上设置背景，或者添加给其父级，input全部透明IE6撑开父级宽度子级宽度如果超过父级宽度，会撑开父级宽度，而其它浏览器不会撑开父级宽度需要精确计算好IE6子集宽度撑满父级父级元素浮动，如果要求子集元素宽度内容撑开，就给里面的子集块元素都加浮动，不然子集元素会撑到父级设置的宽度IE6dotted1px dotted 在IE6下不支持切图片背景平铺IE6margin消失父级有边框的时候，子元素的margin值消失触发父级的haslayoutIE6margin传递有时候子级的margin值会传递到父级上触发父级的haslayoutIE6，IE7表单背景如果tr于thead或tbody同时有背景，则thead和tbody的背景会消失尽量避免IE6，IE7input border输入类型的表单控件加border：none；无效，，依然会有边框。重置input的背景IE6PNG半透明PNG半透明图片在IE6下不起作用解决方案：采用专属IE6的js插件 DD_belatedPNG_0.0.8a.js PNG半透明图片会有从整个页面左上角掉下划入的情况在其父级添加相对定位 position：relative；PNG半透明背景图尽量不要处理鼠标移入的背景图，会出现闪动的情况，移入之前都设定PNG半透明背景图，不过位置需要移出标签外，当鼠标移入后，将背景图移回原位。IE6！important在！Important 后边再加一条同样的样式，会破坏掉 !important的作用，会按照默认的优先级顺序来走。尽量避免

1. children与childNodes

IE提供的children、childNodes和firefox下的childNodes的行为是有区别的，firefox下childNodes会把换行和空白字符都算作父节点的子节点，而IE的childNodes和children不会。比如：

? 1 2 3 <div id= "dd" > <div>yizhu2000</div> </div>

d为dd的div在IE下用childNodes查看，其子节点数为1，而ff下为三，我们可以从firefox的dom查看器里面看到他的childNodes为["\n ", div, "\n"]。

要在firefox下模拟children的属性我们可以这样做：

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 if ( typeof (HTMLElement) != "undefined" && !window.opera) { HTMLElement.prototype.__defineGetter__( "children" , function () { for ( var a = [], j = 0, n, i = 0; i < this .childNodes.length; i++) { n = this .childNodes[i]; if (n.nodeType == 1) { a[j++] = n; if (n.name) { if (!a[n.name]) a[n.name] = []; a[n.name][a[n.name].length] = n; } if (n.id) a[n.id] = n; } } return a; }); }

2. firefox和ie的事件

window.event只能在IE下使用，而不能用在Firefox下，这是因为Firefox的event只能在事件发生的现场使用。 Firefox必须从源处加入event作参数传递。IE忽略该参数，用window.event来读取该event。

比方说下面这个在ie下获得鼠标位置的方法：

? 1 2 3 4 5 6 <button οnclick= "onClick()" >获得鼠标点击横坐标</button> <script type= "text/javascript" > function onclick(){ alert(event.clientX); } </script>

需要改成

? 1 2 3 4 5 6 7 <button οnclick= "onClick(event)" >获得OuterHTML</button> <script type= "text/javascript" > function onclick(event){ event = event || window.event; alert(event.clientX); } </script>

才能在两种浏览器下使用

3.HTML对象获取问题

FireFox获取方式document.getElementById("idName")

ie使用document.idname或者document.getElementById("idName")

解决办法：统一使用document.getElementById("idName");

4. const问题

在Firefox下，可以使用const关键字或var关键字来定义常量；

IE下，只能使用var关键字来定义常量；

解决方法：统一使用var关键字来定义常量。

5.frame问题

以下面的frame为例：

? 1 <frame src= "xxx.html" id= "frameId" name= "frameName" />

a)访问frame对象

IE：使用window.frameId或者window.frameName来访问这个frame对象，frameId和frameName可以同名；

Firefox：只能使用window.frameName来访问这个frame对象；

另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象；

b) 切换frame内容

在 IE和Firefox中都可以使用

window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"

来切换frame的内容；

如果需要将frame中的参数传回父窗口（注意不是opener，而是parent），可以在frame中使用parent来访问父窗口。例如：

parent.document.form1.filename.value="Aqing";

6. body问题

Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在；

7. firefox与IE的父元素(parentElement)的区别

IE：obj.parentElement

firefox：obj.parentNode

解决方法：因为firefox与IE都支持DOM，因此全部使用obj.parentNode

8.innerText的问题

innerText在IE中能正常工作，但是innerText在FireFox中却不行，需用textContent；

解决方法：

? 1 2 3 4 5 if (navigator.appName.indexOf( "Explorer" ) > -1) { document.getElementById( 'element' ).innerText = "my text" ; } else { document.getElementById( 'element' ).textContent = "my text" ; }

9.AJAX获取XMLHTTP的区别

? 1 2 3 4 5 6 var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } elseif (window.ActiveXObject) { // IE的获取方式 xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" ); }

注意：在IE中，xmlhttp.send(content)方法的content可以为空，而firefox则不能为null，应该用send("")，否则会出现411错误。

原文链接：http://caibaojian.com/js-ie-different-from-firefox.html

10.window.event

表示当前的时间对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象·

2.获取事件源

IE用srcElement获取事件源，而FF用target获取事件源

以上两个兼容通常会这么写：

var evt = e||event;

var el = evt.srcTarget || evt.srcElement;

3.添加、去除事件

4.获取标签的自定义属性

IE：div1.value或div1['value']

FF:可用div1.getAttribute("value")

5.document.getElemntByName()和document.all[name]

IE不可以，

FF可以

6.input.type的属性

7.IE支持innerText、outerHTML

FF：支持textContent

8.窗口的位置

IE、chrome、safari：支持使用window.screenLeft和window.screenTop

IE8以上、chrome、safari、firefox：支持使用window.screenX和window.screenY

兼容代码可以使用下面这段代码：

var leftX = typeof window.screenLeft == 'number' ? window.screenLeft : window.screenX;

ver topY = typeof window.screenTop == ‘number’ ? window.screenTop : window.screenY;

9.窗口的大小

firefox、chrome、IE9和safari:window.innerWidth和window.innerHeight

IE系列:document.body.clientWidth和document.body.clientHeight

不是IE6：document.documentElement.clientWidth和document.documentElement.clientHeight

兼容代码可以这样子写

//code from http://caibaojian.com/js-ie-different-from-firefox.html var width = window.innerWidth;

var height = window.innerHeight;

if(typeof width != ‘number’){

if(document.compatMode == ‘CSS1Compat’){

width = document.documentElement.clientWidth;

height = document.docuementElement.clientHeight;

}else{

width = document.body.clientWidth;

height = document.body.clientHeight;

}

1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时: 我们一般通过这两个方法获取行外样式： IE下: currentStyle Chrome,FF下: getComputedStyle(oDiv,false) 兼容两个浏览器的写法: if(oDiv.currentStyle){ alert(oDiv.currentStyle.width); }else{ alert(getComputedStyle(oDiv,false).width); } *注:在解决很多兼容性写法时,都是用if..else.. 封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7) funtion getStyle(obj,name){ if(obj.currentStyle){ //IE return obj.currentStyle[name]; }else{ //Chrom,FF return getComputedStyle(obj,false)[name]; } } 调用：getStyle(oDiv,'width');

2.关于用“索引”获取字符串每一项出现的兼容性问题: 对于字符串也有类似于数组这样的通过下标索引获取每一项的值, var str="abcde"; aletr(str[1]); 但是低版本的浏览器IE6,7不兼容兼容方法:str.charAt(i) //全部浏览器都兼容 var str="abcde"; for(var i=0;i<str.length;i++){ alert(str.charAt(i)); //放回字符串中的每一项 } 3.关于DOM中 childNodes 获取子节点出现的兼容性问题 childNodes:获取子节点, --IE6-8:获取的是元素节点,正常 --高版本浏览器:但是会包含文本节点和元素节点(不正常) 解决方法: 使用nodeType:节点的类型，并作出判断 --nodeType=3-->文本节点 --nodeTyPE=1-->元素节点例: 获取ul里所有的子节点，让所有的子节点背景色变成红色获取元素子节点兼容的方法: var oUl=document.getElementById('ul'); for(var i=0;i<oUl.childNodes.length;i++){ if(oUl.childNodes[i].nodeType==1){ oUl.childNodes[i].style.background='red'; } } 注：上面childNodes为我们带来的困扰完全可以有children属性来代替。 children属性:只获取元素节点,不获取文本节点,兼容所有的浏览器，比上面的好用所以我们一般获取子节点时,最好用children属性。 var oUl=document.getElementById('ul'); oUl.children.style.background="red"; 4.关于使用 firstChild,lastChild 等，获取第一个/最后一个元素节点时产生的问题 --IE6-8下: firstChild,lastChild,nextSibling,previousSibling,获取第一个元素节点 (高版本浏览器IE9+,FF,Chrome不兼容,其获取的空白文本节点) --高版本浏览器下: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling (低版本浏览器IE6-8不兼容) --兼容写法: 找到ul的第一个元素节点,并将其背景色变成红色 var oUl=document.getElementById('ul'); if(oUl.firstElementChild){ //高版本浏览器 oUl.firstElementChild.style.background='red'; }else{ //IE6-8 oUl.firstChild.style.background='red'; }

5.关于使用 event对象，出现的兼容性问题如: 获取鼠标位置 IE/Chrom: event.clientX;event.clientY FF/IE9以上/Chrom: 传参ev--> ev.clientX;ev.clientY 获取event对象兼容性写法: var oEvent==ev||event; document.oncilck=function(ev){ var oEvent==ev||event; if(oEvent){ alert(oEvent.clientX); } }

6.关于为一个元素绑定两个相同事件：attachEvent/attachEventLister 出现的兼容问题事件绑定:(不兼容需要两个结合做兼容if..else..) IE8以下用: attachEvent('事件名',fn); FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false); 多事件绑定封装成一个兼容函数: function myAddEvent(obj,ev,fn){ if(obj.attachEvent){ //IE8以下 obj.attachEvent('on'+ev,fn); }else{ //FF,Chrome,IE9-10 obj.attachEventLister(ev,fn,false); } } myAddEvent(oBtn,'click',function(){ alert(a); }); myAddEvent(oBtn,'click',function(){ alert(b); }); 7.关于获取滚动条距离而出现的问题当我们获取滚动条滚动距离时: IE,Chrome: document.body.scrollTop FF: document.documentElement.scrollTop 兼容处理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

一、document.formName.item(”itemName”) 问题

问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName"]；Firefox 下，只能使用document.formName.elements["elementName"]。

解决方法：统一使用document.formName.elements["elementName"]。

二、集合类对象问题

问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ]获取集合类对象。

解决方法：统一使用 [] 获取集合类对象。

三、自定义属性问题

问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。

解决方法：统一通过 getAttribute() 获取自定义属性。

四、eval(”idName”)问题

问题说明：IE下，可以使用 eval(”idName”) 或 getElementById(”idName”) 来取得 id 为 idName 的HTML对象；Firefox下，只能使用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。

解决方法：统一用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。

五、变量名与某HTML对象ID相同的问题

问题说明：IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，Firefox下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。

解决方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上var关键字，以避免歧义。

六、const问题

问题说明：Firefox下，可以使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量。

解决方法：统一使用var关键字来定义常量。

七、input.type属性问题

问题说明：IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。

解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

八、window.event问题

问题说明：window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事件发生的现场使用。

解决方法：在事件发生的函数上加上event参数，在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)

示例：

? 1 2 3 4 5 6 <input type= "button" οnclick= "doSomething(event)" /> <script language= "javascript" > function doSomething(evt) { var myEvent = evt?evt:(window.event?window.event: null ) ... }

九、event.x与event.y问题

问题说明：IE下，even对象有x、y属性，但是没有pageX、pageY属性；Firefox下，even对象有pageX、pageY属性，但是没有x、y属性。解决方法：var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;

如果考虑第8条问题，就改用myEvent代替event即可。

十、event.srcElement问题

问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。

解决方法：使用srcObj = event.srcElement ? event.srcElement : event.target;

如果考虑第8条问题，就改用myEvent代替event即可。

十一、window.location.href问题

问题说明：IE或者Firefox2.0.x下，可以使用window.location或window.location.href；Firefox1.5.x下，只能使用window.location。

解决方法：使用 window.location 来代替 window.location.href。当然也可以考虑使用 location.replace()方法。

十二、模态和非模态窗口问题

问题说明：IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；Firefox下则不能。

解决方法：直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。

如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话，使用 var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。

十三、frame和iframe问题

以下面的frame为例：

(1)访问frame对象

IE：使用window.frameId或者window.frameName来访问这个frame对象；

Firefox：使用window.frameName来访问这个frame对象；

解决方法：统一使用 window.document.getElementById(”frameId”) 来访问这个frame对象；

(2)切换frame内容

在IE和Firefox中都可以使用 window.document.getElementById(”frameId”).src = “webjx.com.html”或 window.frameName.location = “webjx.com.html”来切换frame的内容；

如果需要将frame中的参数传回父窗口，可以在frame中使用parent关键字来访问父窗口。

十四、body载入问题

问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。

[注] 这个问题尚未实际验证，待验证后再来修改。

[注] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。

十五、事件委托方法

问题说明：IE下，使用 document.body.onload = inject; 其中function inject()在这之前已被实现；在Firefox下，使用 document.body.onload = inject();

解决方法：统一使用 document.body.οnlοad=new Function('inject()'); 或者 document.body.onload = function(){/* 这里是代码 */}

[注意] Function和function的区别

十六、访问的父元素的区别

问题说明：在IE下，使用 obj.parentElement 或 obj.parentNode 访问obj的父结点；在firefox下，使用 obj.parentNode 访问obj的父结点。

解决方法：因为firefox与IE都支持DOM，因此统一使用obj.parentNode 来访问obj的父结点。

十七、innerText的问题.

问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。

解决方法：在非IE浏览器中使用textContent代替innerText。

示例：

? 1 2 3 4 5 if (navigator.appName.indexOf( "Explorer" ) >-1){ document.getElementById( 'element' ).innerText = "my text" ; } else { document.getElementById( 'element' ).textContent = ";my text" ; }

[注] innerHTML 同时被ie、firefox等浏览器支持，其他的，如outerHTML等只被ie支持，最好不用。

十八、Table操作问题

问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。document.appendChild在往表里插入行时FIREFOX支持，IE不支持

解决办法：把行插入到TBODY中，不要直接插入到表

解决方法：

? 1 2 3 4 5 6 //向table追加一个空行： var row = otable.insertRow(-1); var cell = document.createElement( "td" ); cell.innerHTML = "" ; cell.className = "XXXX" ; row.appendChild(cell);

[注] 建议使用JS框架集来操作table，如JQuery。

• 获取table的行数和列数

在IE中，获取行列数可以使用下面的代码：

? 1 2 3 4 5 var detailT= grid.gettable( "11" ); //获取行的长度 var r=detailT.rows.length; //获取列的长度 var l=detailT.cells.length;

而在火狐或谷歌中获取列的长度就是无效的。

解决方案：

? 1 2 3 4 5 var detailT= grid.gettable( "11" ); //获取行的长度 var r=detailT.rows.length; //获取列的长度 var l=detailT.rows[0].cells.length;

十九、对象宽高赋值问题

问题说明：FireFox中类似 obj.style.height = imgObj.height 的语句无效。

解决方法：统一使用 obj.style.height = imgObj.height + ‘px';

二十、setAttribute('style','color:red;')

FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持

解决办法：不用setAttribute('style','color:red')

而用object.style.cssText = ‘color:red;'(这写法也有例外)

最好的办法是上面种方法都用上，万无一失

二一、类名设置

setAttribute('class','styleClass')

FIREFOX支持，IE不支持(指定属性名为class，IE不会设置元素的class属性，相反只使用setAttribute时IE自动识CLASSNAME属性)

解决办法：

? 1 2 3 4 5 setAttribute( 'class' , 'styleClass' ) setAttribute( 'className' , 'styleClass' ) 或者直接 object.className= 'styleClass' ;

IE和FF都支持object.className。

二二、用setAttribute设置事件

var obj = document.getElementById('objId'); obj.setAttribute('onclick','funcitonname();');

FIREFOX支持，IE不支持

解决办法：

IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数

如下：

? 1 2 var obj = document.getElementById( 'objId' ); obj.οnclick= function (){fucntionname();};

这种方法所有浏览器都支持

二三、建立单选钮

IE以外的浏览器

? 1 2 3 4 var rdo = document.createElement( 'input' ); rdo.setAttribute( 'type' , 'radio' ); rdo.setAttribute( 'name' , 'radiobtn' ); rdo.setAttribute( 'value' , 'checked' );

IE:

? 1 var rdo =document.createElement(”<input name=”radiobtn” type=”radio” value=”checked” />”);

解决办法：

这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。

常遇到的关于浏览器的宽高问题：

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 //以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth; //网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight; //网页可见区域宽 //以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框 var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth; //整个网页的宽 var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight; //整个网页的高 var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop; //网页被卷去的高 var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft; //网页左卷的距离 var screenH=window.screen.height; //屏幕分辨率的高 var screenW=window.screen.width; //屏幕分辨率的宽 var screenX=window.screenLeft; //浏览器窗口相对于屏幕的x坐标（除了FireFox） var screenXX=window.screenX; //FireFox相对于屏幕的X坐标 var screenY=window.screenTop; //浏览器窗口相对于屏幕的y坐标（除了FireFox） var screenYY=window.screenY; //FireFox相对于屏幕的y坐标

event事件问题：

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //event事件问题 document.οnclick= function (ev){ //谷歌火狐的写法，IE9以上支持，往下不支持； var e=ev; console.log(e); } document.οnclick= function (){ //谷歌和IE支持，火狐不支持； var e=event; console.log(e); } document.οnclick= function (ev){ //兼容写法； var e=ev||window.event; var mouseX=e.clientX; //鼠标X轴的坐标 var mouseY=e.clientY; //鼠标Y轴的坐标 }

DOM节点相关的问题，我直接封装了函数，以便随时可以拿来使用：

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 //DOM节点相关，主要兼容IE 6 7 8 function nextnode(obj){ //获取下一个兄弟节点 if (obj.nextElementSibling) { return obj.nextElementSibling; } else { return obj.nextSibling; }; } function prenode(obj){ //获取上一个兄弟节点 if (obj.previousElementSibling) { return obj.previousElementSibling; } else { return obj.previousSibling; }; } function firstnode(obj){ //获取第一个子节点 if (obj.firstElementChild) { return obj.firstElementChild; //非IE678支持 } else { return obj.firstChild; //IE678支持 }; } function lastnode(obj){ //获取最后一个子节点 if (obj.lastElementChild) { return obj.lastElementChild; //非IE678支持 } else { return obj.lastChild; //IE678支持 }; }

document.getElementsByClassName问题：

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 //通过类名获取元素 document.getElementsByClassName( '' ); //IE 6 7 8不支持； //这里可以定义一个函数来解决兼容问题，当然别在这给我提jQuery... //第一个为全局获取类名，第二个为局部获取类名 function byClass1(oClass){ //全局获取，oClass为你想要查找的类名，没有“.” var tags=document.all?document.all:document.getElementsByTagName( '*' ); var arr=[]; for ( var i = 0; i < tags.length; i++) { var reg= new RegExp( '\\b' +oClass+ '\\b' , 'g' ); if (reg.test(tags[i].className)) { arr.push(tags[i]); }; }; return arr; //注意返回的也是数组，包含你传入的class所有元素； } function byClass2(parentID,oClass){ //局部获取类名，parentID为你传入的父级ID var parent=document.getElementById(parentID); var tags=parent.all?parent.all:parent.getElementsByTagName( '*' ); var arr=[]; for ( var i = 0; i < tags.length; i++) { var reg= new RegExp( '\\b' +oClass+ '\\b' , 'g' ); if (reg.test(tags[i].className)) { arr.push(tags[i]); }; }; return arr; //注意返回的也是数组，包含你传入的class所有元素； }

获取元素的非行间样式值：

? 1 2 3 4 5 6 7 8 //获取元素的非行间样式值 function getStyle(object,oCss) { if (object.currentStyle) { return object.currentStyle[oCss]; //IE } else { return getComputedStyle(object, null )[oCss]; //除了IE } }

设置监听事件：

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //设置监听事件 function addEvent(obj,type,fn){ //添加事件监听，三个参数分别为对象、事件类型、事件处理函数，默认为false if (obj.addEventListener) { obj.addEventListener(type,fn, false ); //非IE } else { obj.attachEvent( 'on' +type,fn); //ie,这里已经加上on，传参的时候注意不要重复加了 }; } function removeEvent(obj,type,fn){ //删除事件监听 if (obj.removeEventListener) { obj.removeEventListener(type,fn, false ); //非IE } else { obj.detachEvent( 'on' +type,fn); //ie，这里已经加上on，传参的时候注意不要重复加了 }; }

元素到浏览器边缘的距离：

? 1 2 3 4 5 6 7 8 9 10 //在这里加个元素到浏览器边缘的距离，很实用 function offsetTL(obj){ //获取元素内容距离浏览器边框的距离（含边框） var ofL=0,ofT=0; while (obj){ ofL+=obj.offsetLeft+obj.clientLeft; ofT+=obj.offsetTop+obj.clientTop; obj=obj.offsetParent; } return {left:ofL,top:ofT}; }

阻止事件传播：

? 1 2 3 4 5 6 7 8 9 //js阻止事件传播，这里使用click事件为例 document.οnclick= function (e){ var e=e||window.event; if (e.stopPropagation) { e.stopPropagation(); //W3C标准 } else { e.cancelBubble= true ; //IE.... } }

阻止默认事件：

? 1 2 3 4 5 6 7 8 9 //js阻止默认事件 document.οnclick= function (e){ var e=e||window.event; if (e.preventDefault) { e.preventDefault(); //W3C标准 } else { e.returnValue= 'false' ; //IE.. } }

关于EVENT事件中的target：

? 1 2 3 4 5 6 7 //关于event事件中的target document.οnmοuseοver= function (e){ var e=e||window.event; var Target=e.target||e.srcElement; //获取target的兼容写法，后面的为IE var from=e.relatedTarget||e.formElement; //鼠标来的地方，同样后面的为IE... var to=e.relatedTarget||e.toElement; //鼠标去的地方 }

鼠标滚轮滚动事件：

? 1 2 3 4 5 6 7 8 9 //鼠标滚轮事件 //火狐中的滚轮事件 document.addEventListener( "DOMMouseScroll" , function (event){ alert(event.detail); //若前滚的话为 -3，后滚的话为 3 }, false ) //非火狐中的滚轮事件 document.onmousewheel= function (event){ alert(event.detail); //前滚：120，后滚：-120 }

节点加载：

? 1 2 3 //火狐下特有的节点加载事件，就是节点加载完才执行，和onload不同 //感觉用到的不多，直接把js代码放在页面结构后面一样能实现。。 document.addEventListener( 'DOMContentLoaded' , function ( ){}, false ); //DOM加载完成。

最新回复(0)