火狐与IE浏览器之间的一些差别讲解

1、查看文章火狐与 IE 浏览器之间的一些差别收集 2009-09-14 10:26一、 IE 与 FireFox 的 js 和 csspng 透明 AlphaImageLoaderfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizin gMethod=sSize,src=sURL)enabled ：可选项。布尔值 (Boolean) 。设置或检索滤镜是否激活。 true ：默认值。滤镜激活。 false ：滤镜被禁止。sizingMethod ：可选项。字符串 (String) 。设置或检索

2、滤镜作用的对象的图片在对象容器边 界内的显示方式。crop :剪切图片以适应对象尺寸。image:默认值。增大或减小对象的尺寸 边界以适应图片的尺寸。 scale ：缩放图片以适应对象的尺寸边界。src :必选项。 字符串 (String) 。使用绝对或相对 url 地址指定背景图像。 假如忽略此参数， 滤镜将不会作用。firefox 不能对 innerText 支持firefox 支持 innerHTML 但却不支持 innerText ，它支持 textContent 来实现 innerText ，不 过默认把多余的空格也保留了。如果不用textContent ，如果字符串里面不包含 HT

3、ML弋码也可以用innerHTML代替。禁止选取网页内容在 IE 中一般用 js : obj.onselectstart=function()return false;而 firefox 用 CSS:-moz-user-select:none滤镜的支持 (例:透明滤镜 )IE:filter : alpha(opacity=10);firefox : -moz-opacity:.10;捕获事件IE : obj.setCapture() 、 obj.releaseCapture()Firefox : document.addEventListener(”mousemove” ,mousemovef

4、unction,true);document.removeEventListener(”mousemove” ,mousemovefunction,true);获取鼠标位置IE:event.clientX 、 event.clientYfirefox :需要事件函数传递事件对象obj.onmousemove=function(ev)X= ev.pageX;Y=ev.pageY;DIV 等元素的边界问题比如:设置一个 div 的 CSS: width:100px;height:100px;border:#000000 1px solid; IE 中: div 的宽度(包括边框宽度) : 100p

5、x， div 的高度(包括边框宽度) : 100px； 而 firefox : div 的宽度(包括边框宽度) : 102px， div 的高度(包括边框宽度) : 102px；判断浏览器类型var isIE=document.all ? true : false;我写了一个变量，如果支持 document.all 语法那么 isIE=true ，否则 isIE=false在不同浏览器下的 CSS处理一般可以用 !important 来优先使用 css 语句(仅 firefox 支持)比如： border-width:0px!important;border-width:1px;在 firef

6、ox 下这个元素是没有边框的，在 IE 下边框宽度是 1pxdocument.formName.item( ” itemName” ) 问题问题说明： IE 下，可以使用 document.formName.item( ” itemName” ) 或 document.formName.elements ”elementName” ；Firefox 下，只能使用 document.formName.elements ”elementName” 。 解决方法：统一使用 document.formName.elements ” elementName” 。集合类对象问题问题说明： IE 下，可以使

7、用 () 或 获取集合类对象； Firefox 下，只能使用 获取集合类对 象。解决方法：统一使用 获取集合类对象。自定义属性问题问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性； Firefox 下，只能使用 getAttribute() 获取自定义属性。 解决方法：统一通过 getAttribute() 获取自定义属性。eval( ” idName” ) 问题问题说明： IE 下，可以使用 eval( ” idName” ) 或getElementByld( ” idName” )来取得 id 为 idName 的 HT

8、ML对象；Firefox 下，只能使用 getEleme ntByld( "idName” )来取得 id 为 idName 的 HTML对象。解决方法：统一用 getElementByld(idName")来取得id 为idName的HTML对象。变量名与某HTML对象ID相同的问题问题说明：IE下，HTML对象的ID可以作为document的下属对象变量名直接使用，Firefox下则不能；Firefox 下，可以使用与 HTML对象ID相同的变量名，IE下则不能。解决方法： 使用 document.getElementById( ” idName” ) 代替 docum

9、ent.idName 。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上 var关键字，以避免 歧义。const 问题问题说明： Firefox 下，可以使用 const 关键字或 var 关键字来定义常量； IE 下，只能使用 var 关键字来定义常量。解决方法：统一使用 var 关键字来定义常量。input.type 属性问题 问题说明： IE 下 input.type 属性为只读；但是 Firefox 下 input.type 属性为读写。 解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的 input ，然后在 同样的位置再插入一个

10、新的 input 元素。window.event 问题问题说明： window.event 只能在 IE 下运行，而不能在 Firefox 下运行，这是因为 Firefox 的 event 只能在事件发生的现场使用。解决方法：在事件发生的函数上加上 event 参数，在函数体内 ( 假设形参为 evt) 使用 var myEvent = evt?evt:(window.event?window.event:null)示例： <input type= ” button ” onclick= ” doSomething(event) ” /><script language= ”

11、 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.pa

12、geY;如果考虑第 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 或者 Fi

13、refox2.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,nam

14、e,parameters) 方式打开新窗口。 如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener 来访问父窗口。如果需要父窗口控制子窗口的话，使用varsubWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。frame 和 iframe 问题 以下面的 frame 为例：<frame src= ” xxx.html ” id= ” frameId ” name=” frameName” />(1) 访问 frame 对象IE ：使用 window.frameId 或者 window.f

15、rameName 来访问这个 frame 对象；Firefox ：使用 window.frameName 来访问这个 frame 对象；解决方法：统一使用 window.document.getElementById(” frameId ” ) 来访问这个 frame对象；(2) 切换 frame 内容在 IE 和 Firefox 中都可以使用 window.document.getElementById( ” frameId ” ).src = “ xxx.html ”或 window.frameName.location =“ xxx.html ”来切换 frame 的内容；如果需要将 f

16、rame 中的参数传回父窗口，可以在 frame 中使用 parent 关键字来访问父窗口。body 载入问题问题说明： Firefox 的 body 对象在 body 标签没有被浏览器完全读入之前就存在； 而 IE 的 body 对象则必须在 body 标签被浏览器完全读入之后才存在。 注 这个问题尚未实际验证，待验证后再来修改。 注 经验证， IE6 、 Opera9 以及 FireFox2 中不存在上述问题，单纯的 JS 脚本可以访问在脚 本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。事件委托方法问题说明： IE 下，使用 document.body.onload = in

17、ject; 其中 function inject() 在这之前 已被实现；在 Firefox 下，使用 document.body.onload = inject();解决 方法：统一使用 document.body.onload=new Function( ” inject() ”); 或者 document.body.onload = function()/* 这里是代码 */ 注意 Function 和 function 的区别 访问的父元素的区别问题说明：在 IE 下，使用 obj.parentElement 或 obj.parentNode 访问 obj 的父结点；在 firefox

18、 下，使用 obj.parentNode 访问 obj 的父结点。解决方法：因为 firefox 与IE都支持DOM因此统一使用 obj.parentNode来访问obj的父结点。cursor:hand VS cursor:pointer问题说明：firefox 不支持hand,但ie支持pointer，两者都是手形指示。解决方法：统一使用 pointer 。innerText 的问题问题说明： innerText 在 IE 中能正常工作，但是 innerText 在 FireFox 中却不行。 解决方法：在非 IE 浏览器中使用 textContent 代替 innerText 。示例：if

19、(navigator.appName.indexOf(”Explorer ”) >-1)document.getElementById(”element ”).innerText =“my text ”;elsedocument.getElementById( ” element ” ).textContent =“my text ” ; 注 innerHTML 同时被 ie 、 firefox等浏览器支持，其他的，如 outerHTML 等只被 ie 支持，最好不用。对象宽高赋值问题问题说明： FireFox 中类似 obj.style.height = imgObj.height 的

20、语句无效。 解决方法：统一使用 obj.style.height = imgObj.height +“ px” ;Table 操作问题问题说明： ie 、 firefox以及其它浏览器对于 table 标签的操作都各不相同，在 ie 中不允许对 table 和 tr 的 innerHTML 赋值，使用 js 增加一个 tr 时，使用 appendChild 方法也不管 用。解决方法：/ 向 table 追加一个空行： var row = otable.insertRow(-1);var cell = document.createElement(”td ”);cell.innerHTML =“

21、” ;cell.className =“ XXXX” ;row.appendChild(cell); 注 由于俺很少使用 JS 直接操作表格，这个问题没有遇见过。建议使用 JS 框架集来操作 table ，如 JQuery 。ul 和 ol 列表缩进问题消除 ul 、 ol 等列表的缩进时，样式应写成： list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效。J 此句表述有误，详细见J 注 这个问题尚未实际验证，待验证后再来修改。注 经验证，在 IE 中，设置 margin:0px 可以去除列表的上下

22、左右缩进、空白以及列表编号或圆 点，设置 padding 对样式没有影响；在 Firefox中，设置 margin:0px 仅仅可以去除上下的空白， 设置 padding:0px 后仅仅可以去掉左右缩进， 还必须设置 list-style:none 才能去除列表编号或圆点。也就是说，在 IE 中仅仅设置 margin:0px 即可达到最终效果，而在Firefox 中必须同时设置 margin:0px 、 padding:0px 以及 list-style:none 三项才能达到最终效果。CSS透明问题IE：filter:progid:DXImageTransform.Microsoft.Alp

23、ha(style=0,opacity=60)。FF： opacity:0.6。 注 最好两个都写，并将 opacity 属性放在下面。CSS圆角问题IE：ie7 以下版本不支持圆角。FF： -moz-border-radius:4px ，或者 -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px; 。注圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的

24、问题留给别人去想吧。二、 IE6/IE7 和 Firefox 对 Div 处理的差异基本HTML代码<!DOCTYPE html PUBLIC “-/W3C/DTD XHTML 1.0 Transitional/EN ” “/TR/xhtml1/DTD/xhtml1-transitional.dtd” ><html xmlns= ” /1999/xhtml” ><head><title>Div Float Sample</title><style type= ”te

25、xt/css ” >div margin:3px; .d1 width:250px; min-height:20px; border:1px solid #00cc00; .d2 width:130px; min-height:40px; border:1px solid #0000cc; .d3 width:100px; min-height:40px; border:1px solid #cc0000; </style></head><body><div class= ” dT ><div class= ” d2" &g

26、t; </div><div class= ” d3" > </div></div></body></html>以上代码显示的结果如下，很正常，结果相同。当然所有这些情况也许是有合理解释的，说不定增加某一个style 的设置。下面会在这个基础上进行修改，修改的内容都在 style 中，其他代码就不再重复写了。请注意，这里的 Style 中用到了 min-height ，这个和 height 是不同的， min-height 指定了 对象的一个最小高度，当对象的子 内容高度超过这个最小高度是，这个对象会自动撑大。这是

27、一个非常牛的style ，可惜的是，在这个 style 和 float 这个同样牛的 style 一起使用 的时候，就会出现各种问题。内部一个 Div 修改成为 float:left .d1 width:250px; min-height:20px; border:1px solid #00cc00; .d2 width:130px; min-height:40px; border:1px solid #0000cc; float: left; .d3 width:100px; min-height:40px; border:1px solid #cc0000; 显示结果如下。显示结果如下，显

28、示结果如下！显示结果如下。 :left 的情况相同？这个结果中， Firefox 有点离谱了，两个框叠在一起也就罢了，为什么那个红框会变大捏？ 而且变的大小也很诡异， 不知道是按照什么公式计算出来的。 IE 在这里的显示应当是附和标 准的。内部两个 Div 都修改成为 float:left.d1 width:250px; min-height:20px; border:1px solid #00cc00; .d2 width:130px; min-height:40px; border:1px solid #0000cc; float: left; .d3 width:100px; min-h

29、eight:40px; border:1px solid #cc0000; float: left; 这和前面第一种加 float:left 的情况相同。显示结果如下。在这种情况下， Firefox 的结果尚能解释，可能是 float 把外层的 Div 也作为内层 float 影 响的范围，这样内层的就不会将外层的 Div 撑大了。 IE 在这里出现了 Margin 失效的情况， 可以解释为内层第二个 float 造成了影响。干脆把外层的 Div 也修改成为 float:left.d1 width:250px; min-height:20px; border:1px solid #00cc00

30、; float: left; .d2 width:130px; min-height:40px; border:1px solid #0000cc; float: left; .d3 width:100px; min-height:40px; border:1px solid #cc0000; float: left; 以上代码在下面这些 Doctype 下试验过，结果相同。显示结果如下，这种情况下， Firefox 正常了，而 IE 延续了前面的不正常情况。外层是 float:left ，内层最后一个不再 float:left .d1 width:250px; min-height:20px

31、; border:1px solid #00cc00; float: left; .d2 width:130px; min-height:40px; border:1px solid #0000cc; float: left; .d3 width:100px; min-height:40px; border:1px solid #cc0000; left 的情况相同。所以最好是 padding 和 margin 都不用 ?显示结果如下，IE 在这里的显示应当是附和标准的。这和前面第一种加 float:left 的情况相同。结论再重申一次，本文讨论的是一个比较高级的话题。如果在 style 中用

32、 height 而不是 min-height 来设定高度， 是不会出现以上这些问题的。 不过， 不用 min-height 就失去了 div 自动撑大这一个很有必要的特性。在 min-height 和 float:left 的情况下， 没有一种完美的写法让 Firefox 和 IE 结果相同。 不 过仍然可以发现绕开的方法。进一步试验可以发现， margin 遭到的影响在 padding 上比较好，所以最好是 padding 和 margin 都不用，或者只用 padding 。两者相同的代码如下，div padding:3px; .d1 width:250px; min-height:20p

33、x; border:1px solid #00cc00; float: left; .d2 width:130px; min-height:40px; border:1px solid #0000cc; float: left; .d3 width:100px; min-height:40px; border:1px solid #cc0000; float: left; left 的情况相同。当对象的子内容高度超过这个最小高度是。显示结果如下，呵呵，总算是一样了，虽然是凑合着一样了。幸好一样了，否则只好用 table 了。style 的设置，这些问题都迎刃当然所有这些情况也许是有合理解释的，

34、说不定增加某一个而解了，不过目前我还没有找到这个设置。关于 Doctype可惜的是，在这个 style 和 float 这个同样牛的 style 一起使用的时候。 以上代码在下面这些 Doctype 下试验过，结果相同。<!DOCTYPE html PUBLIC “-/W3C/DTD HTML 4.01/EN ”“ /TR/html4/strict.dtd“ ><!DOCTYPE html PUBLIC “-/W3C/DTD HTML 4.01 Transitional/EN”“ /TR/html4/loose.

35、dtd“ ><!DOCTYPE html PUBLIC “-/W3C/DTD XHTML 1.0 Strict/EN”“ /TR/xhtml1/DTD/xhtml1-strict.dtd”><!DOCTYPE html PUBLIC “-/W3C/DTD XHTML 1.0 Transitional/EN”“ /TR/xhtml1/DTD/xhtml1-transitional.dtd” >三、CSS完美兼容IE6/IE7/FF 的通用方法关于CSS对各个浏览器兼容已经是老生常谈的问题了，网络上的教程

36、遍地都是以下内容没有太多新颖 , 纯属个人总结 , 希望能对初学者有一定的帮助 .一、 CSS HACK 以下两种方法几乎能解决现今所有 HACK.1， !important随着IE7对!important 的支持，！important方法现在只针对IE6的HACK.（注意写法.记得该声明位置需要提前 .）2， IE6/IE77 对 FireFox*+html与*html 是IE特有的标签，firefox暂不支持.而*+html又为IE7 特有标签.*+html注意 :二、万能 float闭合关于 clear float将以下代码加入的原理可参见 How To Clear Floats Wit

37、hout Structural MarkupGlobal CSS 中 ， 给需要闭合的 div 加上 class= ” clearfix” 即可 ， 屡试不对IE7的HACK必须保证HTML顶部有如下声明:爽.三、其他兼容技巧1, FF 下 给 div 设 置 padding 后 会 导 致 width 和 height 增加 , 但 IE 不 会 .（ 可 用 !important 解决 ）2, 居中问题 .1）. 垂直居中 . 将 line-height 设置为 当前 div 相同的高度 , 再通过 vertical-align: middle.（ 注意内容不要换行 .）2）. 水平居中

38、. margin: 0 auto;（当然不是万能 ）3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;（ 常见于导航标签 ）4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题 .5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明 , 以避免不必要的麻 烦. （ 常见于导航标签和内容列表 ）6, 作为外部 wrapper 的 div 不要定死高度 , 最好还加上 overflow: hidden.以达到高度而 hand 只适用于 IE

39、.自适应 .7, 关于手形光标 . cursor: pointer.1 针对 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 colo

40、r: #999; /* IE7 */那么在 firefox 下字体颜色显示为 #333 ，IE6 下字体颜色显示为 #666，IE7 下字体颜色显示为 #999。2 css 布局中的居中问题 主要的样式定义如下：body TEXT-ALIGN: center;#center MARGIN-RIGHT: auto; MARGIN-LEFT: auto; 说明：首先在父级元素定义 TEXT-ALIGN: center; 这个的意思就是在父级元素内的内容居中；对于 IE 这样设定就已经可以了。但在 mozilla 中不能居中。解决办法就是在子元素定义时候设定时再加上“ MARGIN-RIGHT: a

41、uto;MARGIN-LEFT: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV 里，你可以依次拆出多个 div ，只要在每个拆出的 div 里定义 MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。3 盒模型不同解释#box width:600px; /for ie6.0- width:500px; /for ff+ie6.0#box width:600px!important /for ff width:600px; /for ff+ie6.0 width /*/:500px; /for ie6.0-4 浮动 ie

42、 产生的双倍距离#box float:left; width:100px; margin:0 0 0 100px; / 这种情况之下 IE 会产生 200px 的距离 display:inline; / 使浮动忽略 这里细说一下 block,inline 两个元素 ,Block 元素的特点是 :总是在新行上开始 ,高度, 宽度, 行高，边距都可以控制（块元素）;lnline元素的特点是：和其他元素在同一行上，不可控制（ 内嵌元素 ）;#box display：block; / 可以为内嵌元素模拟为块元素 display：inline; /实现同一行排列的的效果 diplay：table;lE

43、不认得 min- 这个定义，但实际上它把正常的 width 和 height 当作有 min 的情况来使。这 样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用 min-width 和 min-height 的话， lE 下面根本 等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box width： 80px; height： 35px;html>body #box width： auto; height： auto; min-width： 80px; min-height： 35px;6 页面的最小宽度min-wid

44、th是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但 lE 不认得这个，而它实际上把 width 当做最小宽度来使。为了让这一命令在 lE 上也能用，可以把一个放到 标签下，然后为 div 指定一个类：然后CSS这样设计：#container min-width： 600px; width：expression（document.body.clientWidth < 600?"600px"： "auto" ）;第一个 min-width 是正常的；但第 2 行的 width 使用了 Javascript

45、，这只有 lE 才认得，这 也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。7 清除浮动.hackbox display：table; / 将 对 象 作 为 块 元 素 级 的 表 格 显 示 或 者.hackbox clear:both;或者加入 ：after （伪对象） ， 设置在对象后发生的内容，通常和 content 配合使用， lE 不支 持此伪对象，非 le 浏览器支持，所 以并不影响到 IE/WIN 浏览器。这种的最麻烦的 #box:afterblock; height: 0; clear: both; visibility: hidden

46、;content:II II.display:8 DIV 浮动 IE 文本产生 3 象素的 bug左边对象浮动， 右边采用外补丁的左边距来定位， 右边对象内的文本会离左边有 3px 的间距 . #box float:left; width:800px;#left float:left;width:50%;#right width:50%;*html #left margin-right:-3px; / 这句是关键 HTML代码9 属性选择器 （这个不能算是兼容 , 是隐藏 css 的一个 bug）piddivid这个对于 IE6.0 和 IE6.0 以下的版本都隐藏 ,FF 和 OPera 作

47、用 属性选择器和子选择器还是有区别的 ,子选择器的范围从形式来说缩小了 , 属性选择器的范围 比较大 , 如 pid 中,所有 p 标签中有 id 的都是同样式的 .10 IE 捉迷藏的问题当 div 应用复杂的时候每个栏中又有一些链接，DIV 等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对 #layout 使用 line-height 属性 或者给 #layout 使用固定高和宽。页面结构尽 量简单。11 高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象 使用margin 或 paddign

48、时。例：p 对象中的内容CSS： #box background-color:#eee; #box p margin-top: 20px;margin-bottom: 20px; text-align:center; 解决方法：在P对象上下各加 2个空的div对象CSS代码：.1height:0px;overflow:hidden; 或者为 DIV 加上 border 属性。六、CSS兼容要点分析IE vs FFCSS 兼容要点：DOCTYPE影响CSS处理FF: div 设置 margin-left, margin-right 为 auto 时已经居中 , IE 不行FF: body 设 置

49、 text-align 时 , div 需 要 设 置 margin: auto（ 主 要 是 margin-left,margin-right） 方可居中FF: 设置 padding 后 , div会增加 height 和 width, 但 IE 不会 , 故需要用 !important多设一个 height 和 widthFF: 支持 !important, IE 则忽略 , 可用 !important 为 FF 特别设置样式div 的 垂 直 居 中 问 题 : vertical-align:middle; 将 行 距 增 加 到 和 整 个 DIV 一 样 高 line-height:

50、200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。 参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位 , 若不设 height, 可 以在menubar中插入一个空格 XHTML+CS兼容性解决方案小集使用XHTMILCSS勾架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不 清晰，我就先把一些我遇到的问题写在下面，省的

51、大家四处找AA1、 在mozilla firefox 和IE中的BOX模型解释不一致导致相差2px解决方法：divmargin:30px!important;margin:28px;注意这两个 margin 的顺序一定不能写反，据阿捷的说法 !important 这个属性 IE 不能识别， 但别的浏览器可以识别。所以在 IE 下其实解释成这样：divmaring:30px;margin:28px重复定义的话按照最后一个来执行，所以不可以只写 margin:XXpx!important;2、 IE5 和 IE6 的 BOX解释不一致 IE5 下 divwidth:300px;margin:0 1

52、0px 0 10px;div的 宽度会被解释为300px-10px（右填充）-10px（左填充）最终div的宽度为280px，而在IE6和其 他浏览器上宽度则是以 300px+10px（ 右填充 ）+10px（ 左填充 ）=320px 来计算的。这时我们可以 做如下修改divwidth:300px!important;width /*/:340px;margin:0 10px 0 10px，关于这个 /*/ 是什么我也不太明白，只知道 IE5 和 firefox 都支持但 IE6 不支持，如果有 人理解的话，请告诉我一声，谢了！ ：）3、ul 标签在 Mozilla 中默认是有 padding

53、 值的, 而在 IE 中只有 margin 有值所以先定义 ulmargin:0;padding:0; 就能解决大部分问题4、关于脚本，在 xhtml1.1 中不支持 language 属性，只需要把代码改为< type="text/java">就可以了七、10个你未必知道的 CSS技巧1、CSS字体属性简写规则一般用CSS设定字体属性是这样做的：font-weight:bold;font-style:italic; font-varient:small-caps;font-size:1em;line-height:1.5em;属性，他font-family:v

54、erdana,sans-serif; 但也可以把它们全部写到一行上去： font: bold italic small-caps 1em/1.5em verdana,sans-serif; 真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size 和 font-family时才起作用。而且，如果你没有设定 font-weight, font-style,以及 font-varient们会使用缺省值，这点要记上。2、同时使用两个类一般只能给一个元素设定一个类（ Class ），但这并不意味着不能用两个。事实上，你可以这样：同时给P元素两个类，中间用空格格开，这样所有text和sid

55、e两个类的属性都会加到P元css文件中放在后面素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在 的类的属性起作用。补充：对于一个 ID ，不能这样写也不能这样写3、css border 的缺省值通常可以设定边界的颜色，宽度和风格，如：border: 3px solid #000这位把边界显示成 3 像素宽，黑色，实线。但实际上这里只需要指定风格即可。如果只指定了风格， 其他属性就会使用缺省值。一般地，Border的宽度缺省是 medium, 般等于 3到 4 个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那 么多了。4、CSS用于文档打印许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一