最全整理浏览器兼容性问题与解决方案样本
浏览器不兼容原因及解决方案
浏览器间不兼容原因及解决办法网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为IE 6。
0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同，导致设计的页面效果不一样，所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢?广泛被使用的方法就是 CSS Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格，针对不同的浏览器去写不同的CSS，最大化兼容浏览器。
一般情况下，我都会兼顾IE 6。
0 / IE 7.0 / firefox 2。
0浏览器，下面是用的较频繁的CSS Hack技巧：用的最广莫过于！important了，它可以针对IE(IE 7。
0能正确理解！important)和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上！important，就可以针对其优先了。
所以为了兼顾IE 6。
0与火狐之间的差异,我都会使用！important。
1、仅IE7与IE5。
0可以识别＊+html select {…}当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
2、仅IE7可以识别*+html select ｛…!important；｝当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别* html select ｛…｝这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK.其它浏览器不识别。
4、html/*＊/ >body select {…}这句与上一句的作用相同。
5、仅IE6不识别，屏蔽IE6select { display /*屏蔽IE6＊/:none;}这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
6、仅IE6与IE5不识别，屏蔽IE6与IE5select/**/ { display /＊IE6,IE5不识别＊/：none；}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
浏览器兼容解决方案
浏览器兼容解决方案
《浏览器兼容解决方案》
在互联网时代，浏览器兼容性问题是网站开发人员不得不面对的一个挑战。
不同浏览器对HTML、CSS和JavaScript的解释
存在差异，因此同一个网页在不同浏览器上可能会显示不同的效果，甚至无法正常加载。
为了解决这一问题，我们需要采取一些兼容性解决方案。
首先，使用最新的Web标准。
随着HTML5和CSS3等新技术
的不断发展，很多老版本的浏览器并不支持这些新特性。
因此，在设计网页时，尽量采用最新的Web标准，以确保网页在大
部分现代浏览器上能够正常显示。
其次，进行浏览器检测和特性检测。
借助JavaScript，我们可
以检测用户正在使用的浏览器和其版本，根据不同浏览器的特性来加载不同的代码，以确保页面在各种浏览器上都能够良好地显示和运行。
另外，采用CSS Reset。
不同的浏览器对CSS的默认样式存在
差异，因此在设计网页时，我们可以使用CSS Reset来重置不
同浏览器的默认样式，以确保网页的外观在各种浏览器上保持一致。
最后，采用浏览器嗅探和用户代理检测。
通过浏览器嗅探和用户代理检测，我们可以获取用户的浏览器信息，从而根据用户的浏览器来加载不同的样式和脚本，以确保网页在不同浏览器
上都能够正常运行。
总之，针对浏览器兼容性问题，我们可以采取上述一些解决方案来解决。
只有通过不懈的努力和探索，我们才能够让我们的网页在各种浏览器上都能够完美地呈现。
前端开发中的浏览器兼容性问题与解决方案
前端开发中的浏览器兼容性问题与解决方案在前端开发中，浏览器兼容性问题一直是开发者们头疼的难题。
不同的浏览器对于网页的解析和渲染方式存在差异，因此同一份代码在不同的浏览器上可能会出现不同的效果甚至无法正常运行。
本文将探讨浏览器兼容性问题的原因，并提供一些解决方案。
一、浏览器兼容性问题的原因1. 标准支持差异：不同的浏览器对于HTML、CSS和JavaScript等标准的支持程度存在差异。
一些浏览器可能支持较新的标准，而一些老旧的浏览器可能仅支持较旧的标准，导致同一份代码在不同浏览器上的表现不同。
2. 渲染引擎差异：不同的浏览器使用不同的渲染引擎来解析和渲染网页。
例如，Chrome使用Blink引擎，而Firefox使用Gecko引擎。
这些渲染引擎之间的差异导致了浏览器在页面渲染方面的差异。
3. JavaScript兼容性问题：JavaScript是前端开发中常用的编程语言，但不同的浏览器对于JavaScript的解释和执行也存在差异。
一些浏览器可能支持某些JavaScript特性，而另一些浏览器则不支持，这就导致了在不同浏览器上运行同一段JavaScript代码时可能出现错误或不一致的行为。
二、解决方案1. 选择合适的标准和技术：在开发过程中，我们应该选择符合主流浏览器标准的HTML、CSS和JavaScript技术。
避免使用一些过时的标签和属性，以及不被广泛支持的JavaScript特性。
2. 使用CSS重置样式：不同的浏览器对于默认样式的定义存在差异，这可能导致页面在不同浏览器上的显示效果不同。
通过使用CSS重置样式表，我们可以将不同浏览器的默认样式统一，从而提高页面在不同浏览器上的一致性。
3. 使用浏览器兼容性前缀：一些CSS属性在不同浏览器中可能存在前缀的差异。
为了确保这些属性在不同浏览器上正常工作，我们可以使用浏览器兼容性前缀，例如"-webkit-"、"-moz-"等。
浏览器兼容性问题解决方案汇总
浏览器兼容性问题解决方案汇总浏览器兼容性问题解决方案汇总【来源：小鸟云计算】Ps.小鸟云，国内专业的云计算服务商普及：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。
俗话说：没有IE就没有伤害。
贴士：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。
Normalize.css不同浏览器的默认样式存在差异，可以使用Normalize.css 抹平这些差异。
当然，你也可以定制属于自己业务的reset.css <="" bdsfid="71" href="https:///normalize/7.0.0/normalize.min.c ss" p=""/>rel="stylesheet">简单粗暴法* { margin: 0; padding: 0; }html5shiv.js解决ie9 以下浏览器对html5 新增标签不识别的问题。
respond.js解决ie9 以下浏览器不支持CSS3 Media Query 的问题。
picturefill.js解决IE 9 10 11 等浏览器不支持标签的问题IE 条件注释IE 的条件注释仅仅针对IE浏览器，对其他浏览器无效IE 属性过滤器（较为常用的hack方法）针对不同的IE 浏览器，可以使用不同的字符来对特定的版本的IE 浏览器进行样式控制imageimage浏览器CSS 兼容前缀-o-transform:rotate(7deg); // Opera-ms-transform:rotate(7deg); // IE-moz-transform:rotate(7deg); // Firefox-webkit-transform:rotate(7deg); // Chrometransform:rotate(7deg); // 统一标识语句a 标签的几种CSS 状态的顺序很多新人在写a 标签的样式，会疑惑为什么写的样式没有效果，或者点击超链接后，hover、active 样式没有效果，其实只是写的样式被覆盖了。
浏览器兼容问题及解决方案
浏览器兼容问题及解决⽅案 所谓的浏览器兼容性问题，是指因为不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况。
在⼤多数情况下，我们的需求是，⽆论⽤户⽤什么浏览器来查看我们的⽹站或者登陆我们的系统，都应该是统⼀的显⽰效果。
所以浏览器的兼容性问题是前端开发⼈员经常会碰到和必须要解决的问题。
浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是⼤家平常所说的的“内核”。
市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。
常见的浏览器内核代表有五种，分别是Trident、Gecko、Blink、Webkit、Presto 。
他们代表的浏览器是：Trident:IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器；Gecko：代表作品Mozilla Firefox 是开源的,它的最⼤优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运⾏；Webkit :代表作品Safari、Chrome ，是⼀个开源项⽬；Presto :代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。
它也是世界上公认的渲染速度最快的引擎；Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4⽉发布。
下⾯介绍⼀些常见的浏览器兼容问题及解决⽅案。
1、不同浏览器的标签默认的外补丁和内补丁不同解决⽅案： css ⾥增加通配符 * { margin: 0; padding: 0; }。
2、IE6双边距问题；在 IE6中设置了float , 同时⼜设置margin , 就会出现边距问题解决⽅案：设置display:inline;3、当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度解决⽅案：超出⾼度的标签设置overflow:hidden,或者设置line-height的值⼩于你的设置⾼度4、图⽚默认有间距解决⽅案：使⽤float 为img 布局。
前端开发中的浏览器兼容性问题与解决方案
前端开发中的浏览器兼容性问题与解决方案随着互联网的迅猛发展，前端开发成为了一个独立且重要的领域。
同时，不同浏览器的发展也带来了挑战，前端开发人员需要考虑并解决不同浏览器的兼容性问题。
本文将探讨浏览器兼容性问题的来源、影响因素以及一些解决方案。
浏览器兼容性问题源于不同浏览器之间对Web标准的实现差异。
虽然W3C发布的Web标准旨在统一不同浏览器的行为，但实际上，浏览器供应商对标准的解读和实现方式存在差异。
这导致了同一个网页在不同浏览器上呈现的效果有所差异，甚至在某些情况下无法正常显示。
首先，不同浏览器在CSS解析和渲染方面存在差异。
CSS是前端开发中用于定义网页样式的一种标记语言，但不同浏览器对于CSS属性的支持程度可能不同。
例如，在某些浏览器中，一些CSS属性可能无法正常解析，导致网页的布局和样式出现问题。
为了解决这个问题，开发人员需要对不同浏览器的CSS兼容性进行测试，并根据差异编写特定的CSS代码。
其次，JavaScript的支持和实现方式也因浏览器而异。
JavaScript是一种常用的脚本语言，用于实现网页的交互和动态效果。
然而，由于不同浏览器对JavaScript引擎的实现存在差异，开发人员需要针对不同浏览器编写兼容的JavaScript代码。
一种常见的解决方案是使用开源库，如jQuery，来处理不同浏览器的兼容性问题。
此外，不同浏览器对HTML5和CSS3的支持也有所差异。
HTML5和CSS3是最新的Web标准，提供了丰富的新特性和功能。
然而，旧版本的浏览器对这些新标准的支持有限，甚至完全不支持。
为了在不同浏览器上获得一致的体验，开发人员需要使用一些技术手段，如使用垫片（shim）或后备方案来模拟新特性，或者使用特定的前缀来适应不同浏览器。
解决浏览器兼容性问题的方法有很多，但其中一个有效的策略是采用渐进增强的设计原则。
渐进增强是一种设计理念，它将网页的核心功能作为基本功能，然后根据浏览器的能力逐渐添加和增强其他功能。
前端框架技术中常见的浏览器兼容性问题及解决方案
前端框架技术中常见的浏览器兼容性问题及解决方案在前端开发过程中，浏览器兼容性问题一直是一个头疼的难题。
由于不同浏览器的渲染引擎和规范解释存在差异，导致同样的前端代码在不同浏览器上可能会呈现不同的效果甚至出现错误。
为了提供用户一致的体验，我们需要了解并解决常见的浏览器兼容性问题。
一、CSS兼容性问题1. 盒模型差异Chrome、Firefox以及Safari使用的是W3C标准的盒模型，而IE使用的是传统的IE盒模型。
解决方案是使用CSS的box-sizing属性来明确指定所使用的盒模型。
```box-sizing: border-box; /*使用W3C的盒模型*/box-sizing: content-box; /*使用传统的IE盒模型*/```2. 浮动清除在IE6及其以前的版本中，浮动元素没有被正确的清除，可能会导致父容器的高度无法自适应。
解决方案是使用clearfix类或者在父容器上添加clear属性。
```.clearfix::after {content: "";display: table;clear: both;}```3. 层叠样式兼容性不同浏览器的CSS样式的优先级计算存在差异，可能导致样式覆盖问题。
解决方案是合理使用选择器和样式优先级，避免出现覆盖问题。
二、JavaScript兼容性问题1. DOM操作差异不同浏览器对于DOM操作的实现存在差异，可能导致相同的DOM操作代码在不同浏览器上出现错误。
解决方案是使用现代的DOM操作API，如querySelector、addEventListener等，或者使用框架提供的封装方法。
2. 事件处理不同浏览器对于事件处理的实现存在差异，可能导致事件处理代码在不同浏览器上有兼容性问题。
解决方案是使用框架提供的事件处理方法，如jQuery的事件处理方法，或者使用addEventListener来注册事件。
3. AJAX兼容性不同浏览器对于XMLHttpRequest对象的实现存在差异，可能导致AJAX代码在不同浏览器上无法正常工作。
CSS浏览器兼容性常见问题总结大全（推荐）
CSS浏览器兼容性常见问题总结⼤全（推荐）DIV＋CSS设计IE6、IE7、FF 兼容性DIV＋CSS⽹页布局这是⼀种趋势,我也开始顺应这股趋势了,不过在使⽤DIV＋CSS⽹站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使⽤DIV+CSS设计的⽹页，就应该更注意IE6 IE7 FF对CSS样式的兼容.什么是浏览器兼容：当我们使⽤不同的浏览器（Firefox IE7 IE6）访问同⼀个⽹站，或者页⾯的时候，会出现⼀些不兼容的问题，在这种浏览器下显⽰正常，在另⼀种下就乱了，我们在编写CSS的时候会很恼⽕，刚修复了这个浏览器的问题，结果另外⼀个浏览器却出了新问题。
⼀、!important (功能有限)随着IE7对!important的⽀持, !important ⽅法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)例如:#example {width: 100px !important; /* IE7+FF */width: 103px; /* IE6 */}⼆、CSS HACK的⽅法⾸先需要知道的是：所有浏览器通⽤ height: 100px;IE6 专⽤ _height: 100px;IE7 专⽤ *+height: 100px;IE6、IE7 共⽤ *height: 100px;IE7、FF 共⽤ height: 100px !important;例如：#example { height:100px; } /* FF */* html #example { height:200px; } /* IE6 */*+html #example { height:300px; } /* IE7 */下⾯的这种⽅法⽐较简单举⼏个例⼦：1、IE6 - IE7+FF#example {height:100px; /* FF+IE7 */_height:200px; /* IE6 */}其实这个⽤上⾯说的第⼀种⽅法也可以#example {height:100px !important; /* FF+IE7 */height:200px; /* IE6 */}2、IE6+IE7 - FF#example {height:100px; /* FF */*height:200px; /* IE6+IE7 */}3、IE6+FF - IE7#example {height:100px; /* IE6+FF */*+height:200px; /* IE7 */}4、IE6 IE7 FF 各不相同#example {height:100px; /* FF */_height:200px; /* IE6 */*+height:300px; /* IE7 */}或：#example {height:100px; /* FF */*height:300px; /* IE7 */_height:200px; /* IE6 */}需要注意的是，代码的顺序⼀定不能颠倒了，要不⼜前功尽弃了。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
常用浏览器兼容性问题与解决方案所谓浏览器兼容性问题，是指由于不同浏览器对同一段代码有不同解析，导致页面显示效果不统一状况。
在大多数状况下，咱们需求是，无论顾客用什么浏览器来查看咱们网站或者登陆咱们系统，都应当是统一显示效果。
因此浏览器兼容性问题是前端开发人员经常会遇到和必要要解决问题。
在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精准按照设计图开发前端开发人员，可以说是精准到1px，她们很容易就会发现设计图局限性，并且在很少状况下会遇到浏览器兼容性问题，而这些问题往往都死浏览器bug，并且她们制作页面后期易维护，代码重用问题少，可以说是比较牢固放心代码。
第二类是基本按照设计图来开发前端开发人员，诸多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。
某种效果实现也是重复调试得到，详细为什么浮现这种效果还模模糊糊，整体布局十分脆弱。
稍有改动就乱七八糟。
代码为什么这样写还不知因此然。
此类开发人员往往经常为兼容性问题所困。
修改好了这个浏览器又乱了另一种浏览器。
改来改去也毫无头绪。
其实她们遇到兼容性问题大某些不应当归咎于浏览器，而是她们技术自身了。
文章重要针对是第一类，严谨型开发人员，因而这里重要从浏览器解析差别角度来分析兼容性问题。
浏览器兼容问题一：不同浏览器标签默认外补丁和内补丁不同问题症状：随便写几种标签，不加样式控制状况下，各自margin 和padding差别较大。
遇到频率:100%解决方案：CSS里*备注：这个是最常用也是最易解决一种浏览器兼容性问题，几乎所有CSS文献开头都会用通配符*来设立各个标签内外补丁是0。
浏览器兼容问题二：块属性标签float后，又有横行margin状况下，在IE6显示margin比设立大问题症状:常用症状是IE6中背面一块被顶到下一行遇到频率：90%（稍微复杂点页面都会遇到，float布局最常用浏览器兼容问题）解决方案：在float标签样式控制中加入display:inline;将其转化为行内属性备注：咱们最惯用就是div+CSS布局了，而div就是一种典型块属性标签，横向布局时候咱们普通都是用div float实现，横向间距设立如果用margin实现，这就是一种必然会遇到兼容性问题。
浏览器兼容问题三：设立较小高度标签（普通不大于10px），在IE6，IE7，遨游中高度超过自己设立高度问题症状：IE6、7和遨游里这个标签高度不受控制，超过自己设立高度遇到频率：60%解决方案：给超过高度标签设立overflow:hidden;或者设立行高line-height 不大于你设立高度。
备注：这种状况普通出当前咱们设立小圆角背景标签里。
浮现这个问题因素是IE8之前浏览器都会给标签一种最小默认行高高度。
虽然你标签是空，这个标签高度还是会达到默认行高。
浏览器兼容问题四：行内属性标签，设立display:block后采用float布局，又有横行margin状况，IE6间距bug问题症状：IE6里间距比超过设立间距遇到几率：20%解决方案：在display:block;背面加入display:inline;display:table;备注：行内属性标签，为了设立宽高，咱们需要设立display:block;(除了input 标签比较特殊)。
在用float布局并有横向margin后，在IE6下，她就具备了块属性float后横向marginbug。
但是由于它自身就是行内属性标签，因此咱们再加上display:inline话，它高宽就不可设了。
这时候咱们还需要在display:inline背面加入display:talbe。
浏览器兼容问题五：图片默认有间距问题症状：几种img标签放在一起时候，有些浏览器会有默认间距，加了问题一中提到通配符也不起作用。
遇到几率：20%解决方案：使用float属性为img布局备注：由于img标签是行内属性标签，因此只要不超过容器宽度，img标签都会排在一行里，但是某些浏览器img标签之间会有个间距。
去掉这个间距使用float 是正道。
（我一种学生使用负margin，虽然能解决，但负margin自身就是容易引起浏览器兼容问题用法，因此我禁止她们使用）浏览器兼容问题六：标签最低高度设立min-height不兼容问题症状：由于min-height自身就是一种不兼容CSS属性，因此设立min-height 时不能较好被各个浏览器兼容遇到几率：5%解决方案：如果咱们要设立一种标签最小高度200px，需要进行设立为：{min-height:200px；height:auto !ImportAnt；height:200px；overflow:visible;} 备注：在B/S系统前端开时，有诸多状况下咱们又这种需求。
当内容不大于一种值（如300px）时。
容器高度为300px；当内容高度不不大于这个值时，容器高度被撑高，而不是浮现滚动条。
这时候咱们就会晤临这个兼容性问题。
浏览器兼容问题七：透明度兼容CSS设立做兼容页面办法是：每写一小段代码（布局中一行或者一块）咱们都要在不同浏览器中看与否兼容，固然纯熟到一定限度就没这样麻烦了。
建议经常会遇到兼容性问题新手使用。
诸多兼容性问题都是由于浏览器对标签默认属性解析不同导致，只要咱们稍加设立都能轻松地解决这些兼容问题。
如果咱们熟悉标签默认属性话，就能较好理解为什么会浮现兼容问题以及怎么去解决这些兼容问题。
1./* CSS hack*/来解决。
但是hacker还是非常好用。
使用hacker我可以把浏览器分为3类：IE6 ；1.height:300px;*height:200px;_height:100px;*heihgt，因此当IE6读到*height:200px时候会覆盖掉前一条相冲突设立，以为高度是200px。
继续往下读，IE6还结识_height,因此她又会覆盖掉200px高设立，把高度设立为100px；IE7和遨游也是同样从高度300px设立往下读。
当它们读到*height200px时候就停下了，由于它们不结识_height。
因此它们会把高度解析为200px，剩余浏览器只结识第一种height:300px;因此她们会把高度解析为300px。
由于优先级相似且想冲突属性设立后一种会覆盖掉前一种，因此书写顺序是很重要。
在网站设计时候，应当注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计网，就应当更注意IE6 IE7 FF对CSS样式兼容，否则，你网乱也许出去不想浮现效果！所有浏览器通用height：100px；IE6 专用_height：100px；IE6 专用*height：100px；IE7 专用*+height：100px；IE7、FF 共用height：100px !important;一、CSS 兼容如下两种办法几乎能解决现今所有兼容.1，!important (不是很推荐，用下面一种感觉最安全)随着IE7对!important支持，!important 办法当前只针对IE6兼容.(注意写法.记得该声明位置需要提前.)代码：<style>#wrapper {width：100px!important；/* IE7+FF */width：80px；/* IE6 */}</style>2，IE6/IE77对FireFox <from 针对firefox ie6 ie7css样式>*+html 与 *html 是IE特有标签，firefox 暂不支持.而*+html 又为 IE7特有标签.代码：<style>#wrapper { width：120px；} /* FireFox */*html #wrapper { width：80px;} /* ie6 fixed */*+html #wrapper { width：60px;} /* ie7 fixed，注意顺序 */</style>注意：*+html 对IE7兼容必要保证HTML顶部有如下声明：代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">二、万能 float 闭合(非常重要!) 可以用这个解决各种div对齐时间距不对，关于 clear float 原理可参见 [How To Clear Floats Without Structural Markup]将如下代码加入Global CSS 中,给需要闭合div加上class=”clearfix” 即可,屡试不爽.代码：<style>/* Clear Fix */.clearfix:after {content:"."；display:block；height:0；clear:both；visibility:hidden；}.clearfix {display:inline-block；}/* Hide from IE Mac \*/.clearfix {display:block;}/* End hide from IE Mac *//* end of clearfix */</style>********************************************************************* **************************************************三、其她兼容技巧(相称有用)1，FF下给 div 设立 padding 后会导致 width 和 height 增长，但IE不会.(可用!important解决)2，居中问题.1).垂直居中.将 line-height 设立为当前 div 相似高度，再通过vetical-align：middle.( 注意内容不要换行.)2).水平居中. margin：0 auto;(固然不是万能)3，若需给 a 标签内内容加上样式，需要设立 display：block;(常用于导航标签)4，FF 和 IE 对 BOX 理解差别导致相差 2px 尚有设为 floatdiv在ie下margin加倍等问题.5，ul 标签在 FF 下面默认有 list-style 和 padding . 最佳事先声明，以避免不必要麻烦. (常用于导航标签和内容列表)6，作为外部 wrapper div 不要定死高度，最佳还加上 overflow：hidden.以达到高度自适应.7，关于手形光标. cursor：pointer. 而hand 只合用于 IE.贴上代码：兼容代码:兼容最推荐模式。