长英文、数字字符的自行换行
长英文、数字字符的自行换行是一个老生常谈的话题了，不过对这一问题一直没有总结，每次遇到都得找度娘，借今天的机会我还是做了一下总结。
对于自动换行的情况分两种：一种是块级元素中的长英文字符，另一种是table中的长英文字符。
一、在div、p等块级元素中
对于自行换行的处理，不同浏览器的处理方式是不同的。在ie6、ie7、ie8、ie9、chrome、safari中，只需在块级元素的样式中加入：word-break:break-all 就可以实现自行换行。但word-break:break-all在firefox和opera中失效，因此，对于这两个浏览器需采用另一种方式，即在块级元素的样式中加入：word-wrap:break-word。因此，要兼容不同浏览器，只需加入前面所说的两个样式就行。
具体css样式如下：
div{
word-break:break-all;/*适用于ie6、ie7、ie8、ie9、chrome、safari*/
word-wrap:break-word;/*适用于firefox和opera*/
}
二、在table中
在table中同样也要针对不同浏览器进行处理，在ie6、ie7、ie8、ie9、chrome、safari中，需在table的样式中加入：table-layout:fixed,这个主要是用来固定表格宽度，防止被撑开；同时在th、td的样式中加入：word-break:break-all;这样就可以实现自动换行。同样word-break:break-all在firefox和opera中会失效，因此，针对这两个浏览器th、td中的样式应该写成：word-wrap:break-word。因此要兼容不同浏览器，就得把前面所说的几个样式加起来。
具体css样式如下：
table{table-layout:fixed;/*固定表格宽度，防止被撑开*/}
th,td{
word-break:break-all;/*适用于ie6、ie7、ie8、ie9、chrome、safari*/
word-wrap:break-word;/*适用于firefox和opera*/
}
在firefox和opera中的处理方式并不完美，当相邻的长英文、数字字符串或者中文字符串在一行中所留下的空间不够长英文、数字字符串放置的时候，长英文、数字字符串就会先换行，然后自身再根据容器的宽度进行拆分换行。如下图所示。
点击在ie下的bug
对于这一个情况，tyson已经做了一定的整理（“部分点击”之bug）这里我就补充我所遇到的另一种情况。
情况二（position和background）的补充
HTML code
<ul> <li><img src="banner.png" alt="" /> <a class="btn" href="http://www.baidu.com/">点击按钮</a></li> </ul>
css code
*{margin:0;padding:0;}
ul,li{list-style:none;}
ul{width:600px;height:300px;margin:0 auto;}
li{ position:relative; }
.btn{position:absolute;right:200px;top:100px;width:100px;height:50px;font-size:20px;color:#fff;line-height:50px;text-align:center;overflow:hidden;}
查看demo>>
在一个相对定位的li中，我放入了一张图片和一个绝对定位并拥有布局的a。其中a定位到图片的按钮上。照理说，a应该会覆盖整个按钮，在按钮的任何位置上都可以点击链接。但在所有的ie里，除了文字部分可以点击外，其他部分都不可以点击。
解决方法是：
HTML code
<ul> <li><img src="banner.png" alt="" /> <a class="btn" href="http://www.baidu.com/">点击按钮</a></li> </ul>
css code
*{margin:0;padding:0;}
ul,li{list-style:none;}
ul{width:600px;height:300px;margin:0 auto;}
li{ position:relative; }
.btn{position:absolute;right:200px;top:100px;width:100px;height:50px;background:url('#');font-size:20px;color:#fff;line-height:50px;text-align:center;overflow:hidden;}
查看demo>>
这里的解决方法与tyson的方法相同，都是给链接加上一个背景，因为在上面的情况下加背景会遮住按钮，所以这里只给链接加一个透明的背景，即background:url(‘#’)。
原生js获取宽高与jquery获取宽高的方法的关系
说明：1、因为获取高度的情况跟获取宽度的情况一样，所以以下只说获取宽度的情况。
2、以下所说的所有方法与属性所返回的值都是不带单位的。
3、为了方便说明，以下情况采用缩写表示：
obj -> 在原生JS中表示DOM对象；在JQuery中表示JQuery对象
Width -> obj.style.width
OffsetWidth -> obj.offsetWidth
$width -> obj.width()
$innerWidth -> obj.innerWidth()
$outerWidth -> obj.outerWidth()
padding -> 表示对象的padding-left和padding-right之和
border -> 表示对象的border-left-width和border-right-width之和
原生JS获取宽度的相关属性有 width和offsetWidth。width的获取方法是obj.style.width，只有当对象是通过内嵌方式设定宽度时才能获得，否则返回的是一个空字符串。offsetWidth获得的值跟JQuery中获得对象的outerWidth一样，offsetWidth是非标准的但却得到很好支持的属性。
JQuery获得宽度的方法有width()、innerWidth()、outerWidth()这三种方法。具体使用方式是：obj.width()、obj.innerWidth()、obj.outerWidth()。width()获得的是对象的内容宽度，innerWidth()获得的是对象的内容宽度与填充宽度的和，outerWidth()获得的是包括边框、填充宽度与内容宽度在内的宽度。
这五种方法之间的关系如下：
width = $width;
offsetWidth = border + padding +width;
$innerWidth = padding + width;
$outerWidth = border + padding +width;
这五种方法对firefox、chrome、opera、safari、ie6、ie7、ie8、ie9都兼容，只是存在着两种问题：1、width在没有设定的情况下，chrome在第一次打开页面时，所获取到的宽度全部都是错误的。第二次打开时，结果就跟firefox一致。2、ie6未设定宽高的情况下，不会出现滚动条。
jquery中的事件绑定与取消
本文主要讨论jQuery事件绑定与取消中的两个方面：一是绑定事件的命名方法，二是移除绑定事件的理解。
一、绑定事件的命名方法
jQuery中绑定事件的命名方法主要有两种，一是直接把事件函数赋值给一个变量，格式为bind(type,name=func)。这种命名方法等同于：var name=func; bind(type,name)。二是把事件函数赋值给事件类型的一个自定义属性，格式为bind(type.name,func)(type为事件类型，如click、submit等；前者name为变量名，后者name为事件类型的自定义属性名；func为函数，如function(){alert(“it’s me”)})。这两种方法的作用都是为了把事件函数存储在一个变量或者属性中，方便其他事件调用或者移除该事件。
具体例子如下：
//把事件函数赋值给一个变量a
$("a").bind("click",a=function(){alert("click a")});
//把事件函数赋值给事件click的一个自定义属性a
$("a").bind("click.a",function(){alert("click a");});
二、移除绑定事件的理解
在绑定事件中，我们经常会遇到在某种情况下，需要对已经绑定的事件进行移除，特别是针对其中一个事件的移除。我们可以使用格式为unbind(type)来移除某一事件类型的所有绑定事件；另外可以利用上述的事件命名来针对某一事件进行移除，格式为unbind(type,name)或者unbind(type.name)，这个方法只会移除掉name所存储的事件，对于事件类型所绑定的其他事件不会有干扰。在实际应用中，第二种方法比较常用。在使用第一种方法时，一定要注意，该方法可能会影响到事件类型后来绑定的事件。
具体例子如下：
//click的所有事件将被移除
$("a").bind("click.a",function(){alert("click a");});
$("a").bind("click",function(){alert("b");})
$("a").unbind("click");
//第一个click事件在第一次点击时有效，点击过后，所有的click事件都被移除
$("a").bind("click.a",function(){
alert("click a");
$("a").unbind("click");
});
$("a").bind("click",function(){alert("b")});
//只有click中的a事件会被移除
$("a").bind("click.a",function(){alert("click a");});
$("a").bind("click",function(){alert("b");})
$("a").unbind("click.a");
//click中的a事件会执行一次，然后再被移除；其他事件不受干扰
$("a").bind("click.a",function(){
alert("click a");
$("a").unbind("click.a");
});
$("a").bind("click",function(){alert("b")});
//click中的a事件会执行一次，然后再被移除；其他事件不受干扰
$("a").bind("click",a=function(){
alert("click a");
$("a").unbind("click",a);
});
$("a").bind("click",function(){alert("b")});
图文自适应布局
有时，我们在做项目时，会遇到这样一种情况——在图文内容中，图片需要放在左边，而文字放在右边，并且文字不会环绕图片。也许大家会觉得这个很简单，图片左浮动，文字右浮动就行了。但问题是，图片的宽度是不确定的，所以包含文字的盒子的宽度也就无法确定。左右浮动的方法在这种情况下是失效的。我将这种情况称为图文自适应布局。对于这种情况，我们可以利用overflow:hidden来实现，对于ie6还需要再加上zoom:1。先看一下代码：
html代码：
<div class="box"> <img src="12.jpg" alt="" /> <div class="txt">这是文字的内容</div> </div>
css代码：
.box{overflow:hidden;zoom:1;width:500px;}
img{float:left;display:inline;}
.txt{overflow:hidden;zoom:1;}
大家可以点击这里查看一下效果：图文自适应
实际上，以上方法不仅仅用于图文布局。对于左边部分的内容宽度已经确定，而右边文字内容的宽度不确定的情况下，也可以用这种方法。同样，首先看一下代码。
html代码：
<div class="box">
<div class="img">
这是一个宽度确定的块级元素
</div>
<div class="txt">
这是不确定宽度的文字内容
</div>
</div>
<div class="box">
<div class="img">
这是一个宽度确定的块级元素
</div>
<span class="inline_txt">
这是不确定宽度的行内元素里的文字内容
</span>
</div>
<div class="box">
<div class="inline_img">
这里宽度确定的行内元素
</div>
<div class="txt">
这是不确定宽度的文字内容
</div>
</div>
<div class="box">
<div class="inline_img">
这里宽度确定的行内元素
</div>
<span class="inline_txt">
这是不确定宽度的行内元素里的文字内容
</span>
</div>
css代码：
.box{overflow:hidden;zoom:1;width:500px;margin:50px 0;}
.img{float:left;display:inline;width:200px;background-color:lightgreen;word-wrap:break-word;}
.txt{overflow:hidden;zoom:1;}
.inline_img{float:left;display:inline;width:200px;background-color:lightgreen;}
.inline_txt{display:block;overflow:hidden;zoom:1;}
大家可以点击这里查看一下效果：图文自适应
从以上的例子可以看出，要实现图文自适应布局，需要满足以下条件：（为了说明方便，以下用元素的类名来代表该元素）1、box需清除内部浮动，可用本文的overflow:hidden;zoom:1;的方法来清除。2、img要设置浮动，按本文的例子，即设为左浮动，若img不是图像，则还需要确定宽度。3、txt需要用overflow:hidden来实现文字浮动到图像右边的效果；在ie6下，overflow:hidden是无效的，需要用zoom:1来代替；若txt部分为行内元素，还需要把这个元素转换成为块级元素，不然文字将会环绕图像。
伪类与伪元素的区别
在css2中对它们的定义如下：
伪元素：伪元素是指那些在文档树结构里没有用文档语言具体指定的文档树结构。比如，文档语言并没有提供一个途径去获得元素内容里的每一个字母或者第一行，但伪元素允许我们对这些结构进行样式设计。伪元素还提供我们对一些不存在在文档里的元素进行样式操作的路径。如:befor 和 :after伪元素就是文档里并没有的元素，但在显示时，他们可以出现在内容里。
伪类：伪类是根据元素的特征而不是他们的名字、属性或者内容进行归类的，大体上是那些无法根据文档树的结构来推断的特征。伪类也许是动态的，感觉就像是进行用户交互时一个元素可能获得或者失去一个伪类。不过也有例外，:first-child和:lang是可以通过文档树来推断的（后者只在某些情况下可以）。（要查看原文，可以点击这里）
具体可以这样子理解：（1）伪元素可以看作是文档结构的一部分，:first-letter和:first-line是存在的文档元素的一部分，而:after和:before则是通过css生成的文档元素的一部分。而伪元素的样式设计就是对这些获得的部分进行操作。（2）伪类则相当于是对某个元素进行类样式的替换，而替换的依据就是用户交互的特征，如鼠标点击、获得焦点、打印。这些动作的发生都是不知预知的。
css2中提供的伪元素（也称为伪对象）有：:first-letter、 :first-line、 :before 、:after，伪类有：:link、 :visited、 :hover、 :active、 :focus、 :first-child、 :first、 :left :right、 :lang。这些的具体用法这里就不详述，有需要有可以去看一下参考手册。
拥有布局 IE haslayout
来自于http://adamghost.com/2009/03/ie-has-layout-and-bugs-zh/
我们都知道浏览器有bug，而且Windows上的lE的bug 似乎比大多数浏览器都多。IE/Win的表现与其他浏览器不同的原因之一是，显示引擎使用一个称为布局(layout)的内部概念。因为布局是一个专门针对显示引擎内部工作方式的概念，所以一般悄况下不需要了解它。但是，布局问题是许多IE/Win显示bug的根源，所以理解这个概念以及它如何影响CSS是有帮助的。
什么是布局
Windows 上的IE 使用布局概念来控制元素的尺寸和定位。那些称为拥有布局(have layout)的元素负责本身及其子元素的尺寸和定位。如果一个元素没有拥有布局，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。
IE 显示引擎利用布局概念减少它的处理开销。在理想情况下，所有元素都控制自己的尺寸和定位。但是，这会在IE中导致很大的性能问题。因此，IE/Win 开发团队决定只将布局应用于实际需要它的那些元素，这样就可以充分地减少性能开销。
在默认情况下拥有布局的元素包括:
- body
- 标准模式中的 html
- table
- tr, td
- img
- hr
- input, select, textarea, button
- iframe, embed, object, applet
- marquee
布局概念是Windows 上的I E 特有的，而且它不是CS S 属性.尽管某些CSS 属性会使元素拥有布局，但是在CSS 中无法显式地设置布局。可以使用JavaScript 函数hasLayout 查看一个元素是否拥有布局.如果元素拥有布局，这个函数就返回true ; 否则返回false。 hasLayout 是一个只读属性，所以无法使用JavaScript 进行设置.
设置以下CSS 属性会自动地使元素拥有布局·
- position: absolute
- float: left or right
- display: inline-block
- width: any value
- height: any value
- zoom: any value (Microsoft property—doesn’t validate)
- writing-mode: tb-rl (Microsoft property—doesn’t validate)
布局有什么效果?
布局是许多IElWin 显示bug 的根源。例如， 如果一个文本段落靠着一个浮动元素，那么期望文本围绕这个元素。但是，在Windows 上的1E 6 和更低版本中，如果段落拥有布局(例如，由于设置了高度).那么它就被限制为矩形，因此阻止文本围绕浮动元素〈见图9-5).
Figure Above: 期望文本围绕相邻的浮动元素，但是，在IE/Win上，如果文本元素拥有布局，就不会这样显示。(图9-5)
这会导致浮动布局的各种问题。更糟的是，许多人使用IE 作为主浏览器，他们会错误地认为这才是正确的表现，在其他浏览器以不同方式处理浮动元素时，他们反而会不解.
另-个问题涉及拥有布局的元素如何确定自己的尺寸，如果元素的内容变得比元素本身大，那么期望元素流出到元素外.但是，在Windows 上的IE 6 和更低版本中，拥有布局的元素会错误地扩展以便适应内容的尺寸(见图9-6).
Figure Above: 拥有布局的错误的扩展以便适应内容（图9-6）
这意味IE/Win中的width 实际上更像min-width. 这种行为也是在IE/Win中许多浮动布局被破坏的原因。当浮动框的内容错误地迫使框的宽度增加时，框对于可用空间来说太大了，因此下降到其他浮动元素的下面.
其他问题包括:
- 拥有布局的元素不进行收缩。
- 布局元素对浮动进行自动清理。
- 相对定位的元素不获得布局。
- 在拥有布局的元素之间空白地不叠加。
- 在不拥有布局的块级链接上，单击区域只覆盖文本。
在下一节中，我们将讨论一些最常见的浏览器bug. 你会注意到对于Windows 上的IE的许多修复方法都涉及通过设置属性迫使元素拥有布局。实际上，如果遇到一个IE/Wi n bug，首先应该做的事情之一就是尝试通过应用规则迫使元素拥有布局。看看这是否可以修复问题。
如果希望进一步了解IE的内部hasLayout属性，我建议阅读http://tinyurl.com/acg78上的”On Having Layout”。
常见bug及其修复方法
CSS 开发人员最重要的技能之一是发现常见浏览器bug的能力。通过了解导致这些bug 的各种元索，可以在它们造成问题之前发现并且修复它们。
双空白边浮动bug
最常见且最容易发现的bug 之一是IE6和更低版本中的双空白边浮动bug。顾名思义，这个Windows bug使任何浮动元素上的空白边加倍(见图9-7)。
Figure Above: IE/Win 的双空白浮动bug示意图(图9-7)
这个bug 很容易修复，将元素的display 属性设置为inline 就行了.因为元素是浮动的，将display 属性设置为inline 实际上不会影响显示方式。但是，这似乎会阻止Windows 上的IE6和更低版本将所有空白地加倍。这是一个非常容易发现和修复的bug : 每当对具有水平空白边的元素进行浮动时，都应该很自然地将display 属性设置为inline。
3像素文本偏移bug
另一个非常常见的I E 5-61Win bug 是3像素文本偏移bug。当文本与二个浮动元素相邻时，这个bug 就会表现出来。例如，假设将-个元素向左浮动，并且不希望相邻段落中的文本围绕浮动元素。你可能会在段落上应用一个左空白边，其宽度等于浮动元素的宽度:
.myFloat { float: left; width: 200px; }
p { margin-left: 200px; }
如果这么做，在文本和浮动元素之间就会出现一个莫名其妙的3像素间隙。(见图9-8) 。
Figure Above: IE 5-6/Win 的3像素文本偏移bug示意图(见图9-8)
修复这个bug 需要双管齐下。首先，给包含文本的元素设置任意的高度。这会迫使元素拥有布局，这在表面上会消除文本偏移。因为Windows 上的IE6和更低版本将height作为min-height那样对待，所以设置一个小的高度并不会影响元素在这些浏览器巾的实际尺寸。但是，这会影响其他浏览器，所以要使用Holly招数对除了Windows 上的IE6 和更低版本之外的所有其他浏览器隐藏这个规则，
/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p { height: 1%; }
/* End hide from IE5/Mac */
不幸的是，这么做会导致另一个问题。正如在前面学到的，拥有布局的元素被限制为矩形的，并且出现在浮动元索的旁边而不是它们的下面。添加200像素的空白边实际上会在IE 5-6/Win 中在浮动元素和段落之间产生200像素的间隙。为了避免这个问题，需要将IE 5-6/Win 上的空白边重新设置为零:
/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p { height: 1%; margin-left: 0; }
/* End hide from IE5/Mac */
文本偏移被修复了，但是现在另一个3像亲间隙出现了，这一次是在浮动元素上。为了去掉这个问题，需要在浮动元素上设置一个负值的3像素右空白边：
/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p { height: 1%; margin-left: 0; }
* html .myFloat { margin-right: -3px; }
/* End hide from IE5/Mac */
如果浮动元素是除了图像之外的任何其他东西，那么这个问题己经修复了。但是，如果浮动元素是图像，那么还有最后一个问题需要解决。 IE 5.x/Win在图像的左右都添加3像亲的间隙。而IE6不改变图像的空白边。因此，需要用另一个招术在IE 5.x/Win 上去掉3 像素的问题:
/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p { height: 1%; margin-left: 0; }
* html img.myFloat { margin: 0 -3px; ma\rgin: 0; }
/* End hide from IE5/Mac */
这会解决问题，但是采用的方式很难看而且太复杂。因此，如果可能的话，最好将这些规则分别放进单独的浏览器特定的样式表中。如果这样做，用于Windows 上的lE 5.x的样式表如下：
p { height: 1%; margin-left: 0; }
img.myFloat { margin: 0 -3px; }
用于IE 6的样式表如下:
p { height: 1%; margin-left: 0; }
img.myFloat { margin: 0; }
IE 6躲躲猫bug
另一个奇怪而且很烦人的 bug 是IE6 的躲躲猫(peek-a-boo) bug，之所以起这个名称是因为在某些条件下文本看起来消失了，只有在重新装载页面时才再度出现。出现这个bug 的条件是:一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素，那么中间的浮动元素看起来就像消失了，隐藏到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现(见图9-10)。
Figure Above:IE 6的躲躲猫bug示意图（图9-10)
相对容器中的绝对定位
我要讨论的最后一个主要浏览器bug涉及相对定位容器中的绝对定位元素。在前面的章节中你学到将绝对定位的元素嵌套在相对容器中是多么有用。但是，IE 6和更低版本在使用这种技术时有许多bug。
这些bug 的原因在于相对定位的元素没有获得IE/Win 的内部hasLayout 属性。因此，它们不创建新的定位上下文，所有绝对定位元素相对于窗口进行定位(见图9-11)。
Figure Above:IE5.x对相对容器中的绝对定位元素的定位方式不正确（图9-11)
为了使Windows 上的IE 6和更低版本的表现正确。需要迫使相对应的容器拥有布局。一种方法是在容器上显式地设置width 和height。但是，常常希望在不知道容器的width 和height的况下，或者在需要这些属性保持灵活的情况下使用这种技术。
可以使用Holly 招数为容器提供一个的高度。这会让容器拥有布局。因为IE 6和更低版本中的元素会不正确地扩展以适应它们的内容，所以设置小的高度不会影响实际高度。
/* Hides from IE-Mac \*/
* html .container { height: 1%; }
/* End hide from IE-Mac */
停止对IE 的批评
IE 并不足惟一一种有bug 的浏览器，所以你可能会奇怪我为什么只关注IE bug。 不必担心，我找并不是专门和微软过不去，这么做是有理由的。
首先， IE 目前占有最大的浏览器市场份额。因为有许多人在使用IE，IE bug 往往很快被发现而且很好地记录下来。当在IE中发现一个重大的CSS bug时，许多开发人员会尝试寻找修复方法或解决方案。由于IE的流行程度，被记录并修复的IE bug比其他任何浏览器都要多.
另一个主要问题是开发的节奏。Firefox、Safari和Opera等浏器不断地进行更新，新版本以非常高的频率出现。 bug 几乎一经发现就被修复了，并且发布浏览器的新版本.因此，现在讨论的任何Firefox或Safari bug 可能已经被下一个修订版修复了。
如此高的开发节奏确实很棒，但是也有自己的问题。开发人员要应付的浏览器版本不是两三个，而是20或30个。你无法确定用户是否使用最新的版本，这使测试变得极其困难。另一方面，IE差不多5年没有发布主要修订版了。因此，bug 有更多的时间可以暴露出来，开发人员也有更强的寻找修复方法的动力。
幸运的是，IE 7承诺将成为更符合标准的浏览器。许多著名的IE bug 已经被解决，而且对高级CSS 2.1 选择器（比如子选择器和属性选择器）的支持也在增加。与所有浏览器一样，新的bug也会出现，IE 7远不是完美的。但是，人们越快地升级到IE 7和Firefox 等现代浏览器，IE 5.0等老式浏览器就会越快地退役。
在这个过渡时期，可以考虑使用Dean Edwards 的IE 7 补丁。这是一系列JavaScript 文件，它们使IE 5-6/Win 能够接近IE 7的水平.这包括改进的选择器实现和许多bug 修复。关于这个补丁的更多信息，请访问http://dean.edwards.name/IE7/。
return在ie与标准浏览器中的区别
在讲这个之前，先让我们来看一段代码：
function styleHeaderSibling(){
if(!document.getElementsByTagName) return false;
var headers = document.getElementsByTagName("h1");
for(var i=0; i<headers.length; i++){
var elem = getNextElement(headers[i]);
elem.style.color = "green";
}
}
function getNextElement(node){
var elem = node.nextSibling;
if(elem == null) return elem;
if(elem.nodeType == 1){
alert(elem.nodeType);
return elem;
}else{
getNextElement(elem);
//请注意这里return必须要写，即写成return getNextElement(elem);不然的话，在chrome中将无法返回节点
}
}
本段代码是想通过getNextElement函数取得h1的下一个元素节点，然后再通过styleHeaderSibling函数把取得的节点的文本颜色改成绿色。在测试的过程中发现一个问题，在ie里这段代码能够正常运行，而标准浏览器中却不能正常运行。后来发现在最后一句代码里，我一开始是没有写return的。对于ie来说，它会忽略掉这个错误，自动帮我把节点返回给styleHeaderSibling。而标准浏览器则会严格要求，对于没有写return的，它将不会把节点返回。正是因为这样，所以在标准浏览器中，我的这段代码就不能够正常运行。
ps:这种情况目前只在ie7、ie8、firefox3.6、chrome6.0.408.1测试过，上文所讲的标准浏览器是指后两种浏览器
子节点数的差异
最近在写一个图片展示的js，发现对于一个元素的子节点，不同浏览器会有所不同。首先，先让我们来看一段代码：
<div class="1"> <a href="http://www.baidu.com"><img src="1.jpg" /></a> <h1><a href="http://www.baidu.com">SIFE在德国取得八强佳绩SIFE在德国取得八强佳绩</a></h1> <p>广东外语外贸大学SIFE团队在德国取得八强佳绩广东外语外贸大学SIFE团队在德国取得八强佳绩</p> </div>
对于div来说，它有多少个子节点呢？3个。我一开始的时候也是这么想，但在chrome和firefox中，运行时，我发现用
document.getElementById("1").childNode[3]
却取不到第三个子节点p，而在ie中却可以取得到。通过
alert（document.getElementById("1").childNode[i])
，我发现在chrome和firefox中每两个元素节点之间都还有一个文本节点，正是因为这些文本节点，我们所看到的子节点数跟实际上的子节点数有所差别。那这些文本节点是什么呢？在《JavaScript DOM编程艺术》中，有提及到这么一点——有些浏览器会把换行符解释为一个文本节点。目前，我只在chrome6.0.408.1和firefox3.6中发现有这么一种解析，不知还有哪些浏览器有这种解析，若有谁有在其他版本遇到过这种情况的，可以在留言中与我们分享。
背景图片的定位-像素
CSS中背景图片的定位有三种方法：（1）关键字：background:url(img.jpg) top left; (2)像素：background:url(img.jpg) 0px -22px; (3)百分比：background:url(img.jpg) 50% 50%。最近刚做了像素方面的定位，所以在此分享像素的定位。
CSS中背景定位中的像素其实是图片左上角在显示的区域内的坐标（以显示区域左上角为原点，上边向右为x轴，左边向下为y轴如下图）
下面以本人做的Rss订阅来说明。图中人人网订阅图标的左上角距离整个图标的左上角的距离为（0，22px）。我想把人人网的订阅图标做为一个链接的背景。采用像素的定位，则整个图标的左上角应该在显示区域的位置应该是（0，-22px），css代码是:background:url(img.jpg) 0 -22px no-repeat。如上图，红色区域为链接的背景，也就是所说的显示区域。
在此顺便附上代码：
css代码：
.sidebar_rss, .sidebar_rss li{
float:left;
width:117px;
list-style:none;
}
.sidebar_rss li{
height:22px;
padding:0;
margin:0;
}
.sidebar_rss li a{
width:117px;
height:22px;
display:block;
text-indent:-100px;
}
.rss_h23, .bg_rss{
height:23px;
}
/*背景图片的定位*/
.bg_rss{
background:url(rss_icons.gif) no-repeat 0px 0px;
}
.bg_renren{
background:url(rss_icons.gif) no-repeat 0px -22px;
}
.bg_google{
background:url(rss_icons.gif) no-repeat 0px -44px;
}
.bg_kaixin{
background:url(rss_icons.gif) no-repeat 0px -66px;
}
.bg_QQmail{
background:url(rss_icons.gif) no-repeat 0px -88px;
}
/*hover的背景图片位置*/
.bg_rss:hover{
background:url(rss_icons.gif) no-repeat 6px 0px;
}
.bg_renren:hover{
background:url(rss_icons.gif) no-repeat 6px -22px;
}
.bg_google:hover{
background:url(rss_icons.gif) no-repeat 6px -44px;
}
.bg_kaixin:hover{
background:url(rss_icons.gif) no-repeat 6px -66px;
}
.bg_QQmail:hover{
background:url(rss_icons.gif) no-repeat 6px -88px;
}
html代码：
<ul> <li><a href="">订阅</a></li> <li><a href="" >人人网</a></li> <li><a href="" >谷歌</a></li> <li><a href="" >开心网</a></li> <li><a href="" >QQ邮箱</a></li> </ul>