DIV+CSS设计时IE6、IE7、FireFox 与兼容性有关的特性
IE6兼容兼容心得(自己总结的)
文档类型2010年8月19日16:32使用以下DOCTYPE可使避免IE6进入怪异模式,不适用文档声明或使用HTML3以下的文档声明会是IE6进入向下兼容IE5的怪异模式DOCTYPE (Document Type) 文档类型，说明 XML 或者 (x)HTML 的版本。
DTD (Document Type Definitions) 文档类型定义，浏览器根据 DTD 来解释页面标识，并展现出来。
DOCTYPE 通常（但不总是）包含指定的DTD文件的URL。
浏览器一般不读取这些文件，而是只识别常见的 DOCTYPE 声明。
HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">HTML 4.01 Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""/TR/html4/frameset.dtd">XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""/TR/xhtml11/DTD/xhtml11.dtd">源文档</jennior/blog/item/79eb1dfa8922539c59ee9057.html>根据w3c关于stack level 的介绍可以得出以下stack level 规则父级stacking context的背景、边界1.z-index值为负值的定位元素（值越小越在下）2.文本流中非定位的block块级子元素3.脱float 块的文本4.文本流中非定位的float浮动子元素/文字元素5.脱块文本/行内元素6.z-index：auto/0的定位元素7.z-index值为正的定位元素（值越大越在上）8.每个stacking context都包括以下stack level （后来居上）：IE 6/IE7的规则父级stacking context的背景、边界1.z-index值为负值的定位元素（值越小越在下）2.脱块文本脱float 块文本(ie7)/行内元素3.未固定宽度文本流中非定位的block块级子元素4.固定宽度文本流中非定位的block块级子元素/文本流中非定位的、float浮动子元素/文字5.z-index：auto/0的定位元素6.z-index值为正的定位元素（值越大越在上）7.每个stacking context都包括以下stack level （后来居上）：垂直堆栈2010年8月20日10:58IE6/7技巧2010年8月24日12:35禁用IE6/7默认的垂直滚动条(Disabled IE default Vertical Scroll bar)默认情况下，即使内容适合窗口大小，IE(译注：IE6/7)也会显示垂直滚动条。
前端常见浏览器兼容性问题解决方案
前端常见浏览器兼容性问题解决⽅案市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。
浏览器内核主要分为两种，⼀是渲染引擎，另⼀个是js引擎，内核更加倾向于说渲染引擎。
常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器：Trident内核，也称为IE内核Chrome浏览器：Webkit内核，现在是Blink内核Firefox浏览器：Gecko内核，俗称Firefox内核Safari浏览器：Webkit内核Opera浏览器：最初是⾃⼰的Presto内核，后来加⼊⾕歌⼤军，从Webkit⼜到了Blink内核；360浏览器：IE+Chrome双内核猎豹浏览器：IE+Chrome双内核百度浏览器：IE内核QQ浏览器：Trident（兼容模式）+Webkit（⾼速模式）常见的兼容性问题：1.不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同解决⽅案：css⾥增加通配符*{margin：0；padding：0}2.IE6双边距问题；在IE6中设置了float，同时⼜设置margin，就会出现边距问题解决⽅案：设置display：inline；3.当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度解决⽅案：超出⾼度的标签设置overflow：hidden，或者设置line-height的值⼩于你的设置⾼度4.图⽚默认有间距解决⽅案：使⽤float为img布局5.IE9以下浏览器不能使⽤opacity解决⽅案：opacity：0.5；filter：alfha（opacity=50）；filter：progid：DXlmageTransform.Microsoft.Alfha(style=0,opacity=50);6.边距重叠问题；当相邻两个元素都设置了margin边距时，margin将取最⼤值，舍弃最⼩值；7.cursor：hand显⽰⼿型在safari上不⽀持解决⽅案：统⼀使⽤cursor：pointer8.两个块级元素，⽗元素设置了overflow：auto；⼦元素设置了position：relative；且⾼度⼤于⽗元素，在IE6、IE7会被隐藏⽽不是溢出；解决⽅案：⽗级元素设置position：relative9.const问题说明：Firefox下，可以使⽤const关键字来定义常量；IE下，只能使⽤var关键字来定义常量。
CSS Hack比较
CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。
常见兼容问题：1.DOCTYPE 影响CSS 处理2.FF: div 设置margin-left, margin-right 为auto 时已经居中, IE 不行3.FF: body 设置text-align 时, div 需要设置margin: auto(主要是margin-left,margin-right) 方可居中4.FF: 设置padding 后, div 会增加height 和width, 但IE 不会, 故需要用!important 多设一个height 和width5.FF: 支持!important, IE 则忽略, 可用!important 为FF 特别设置样式6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字，就垂直居中了缺点是要控制内容不要换行7.cursor: pointer 可以同时在IE FF 中显示游标手指状，hand 仅IE 可以8.FF: 链接加边框和背景色，需设置display: block, 同时设置float: left 保证不换行。
参照menubar, 给 a 和menubar 设置高度是为了避免底边显示错位, 若不设height, 可以在menubar 中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。
所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;10.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。
浏览器兼容问题及解决方案
浏览器兼容问题及解决⽅案 所谓的浏览器兼容性问题，是指因为不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况。
在⼤多数情况下，我们的需求是，⽆论⽤户⽤什么浏览器来查看我们的⽹站或者登陆我们的系统，都应该是统⼀的显⽰效果。
所以浏览器的兼容性问题是前端开发⼈员经常会碰到和必须要解决的问题。
浏览器最关键的部分就是它的渲染引擎（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前端兼容性指南
Web前端兼容性指南⼀、Web前端兼容性问题⼀直以来，Web前端领域最⼤的问题就是兼容性问题，没有之⼀。
前端兼容性问题分三类：浏览器兼容性屏幕分辨率兼容性跨平台兼容性1、浏览器兼容性问题第⼀次浏览器⼤战发⽣在上个世纪90年代，微软发布了IE浏览器，和⽹景公司的Netscape Navigator⼤打出⼿，1998年⽹景不得不将公司卖给AOL。
没有了对⼿的IE不思进取，W3C标准⽀持发展缓慢，为以后的IE兼容性灾难埋下了伏笔。
到2004年，IE的市场份额达到95%，但在此之后IE的份额逐步遭其他浏览器蚕⾷，主要包括Firefox，Chrome，Safari和Opera。
.2001年8⽉27⽇，微软发布IE6，时隔五年直到2006年才发布了IE7。
2009年3⽉19⽇，经历了众多测试版后，IE8最终发布，虽然IE8针对旧版IE在多⽅⾯做了很⼤改进，但在HTML5、CSS 3等标准⽀持⽅⾯仍落后于其他浏览器对⼿。
这三个版本的IE是所有兼容性问题的最⼤根源，堪称前端噩梦。
IE6、7、8不⽀持HTML5、CSS3、SVG标准，可被判定为“极难兼容”IE9不⽀持Flex、Web Socket、WebGL，可被判定为“较难兼容”IE10部分⽀持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容”IE11部分⽀持Flex、WebGL，可被判定为“较易兼容”IE6、7、8、9可视为“⽼式浏览器”IE10、11可视为“准现代浏览器”Chrome、Firefox、Safari、Opera 、Edge可视为“现代浏览器”浏览器与Windows版本份额Statcounter的各项数据以2020年6⽉为基准。
2、屏幕分辨率兼容性问题在不同的屏幕分辨率，浏览器页⾯展⽰差异很⼤。
特别是屏幕分辨率较⼩时，容易发⽣布局错乱。
为了解决这个问题，响应式UI框架应运⽽⽣。
主流桌⾯屏幕分辨率宽度集中在1280~1920，⾼度集中在720~1080；主流平板屏幕分辨率宽度集中在962~1280，⾼度集中在601~800。
div教程
div+css技巧汇编同时兼容IE、FF的基本注意事项1、float的div一定要闭合。
例如：(其中floatA、floatB的属性已经设置为float:left;)<wrapper><div id="floatA"></div><div id="floatB"></div><div id="NOTfloatC"></div></wrapper>这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。
原因是NOTfloatC并非float标签，必须将float标签闭合。
在<div id="floatB"></div><div id="NOTfloatC"></div>之间加上<div class="clear"></div>aw提醒您：这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可：.clear{clear:both;}此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如我的某一个wrapper如下定义：.colwrapper{overflow:hidden;zoom:1;margin:5px auto;}[/code]onhavinglayout-绝对不得错过，每一个制作CSS以及用脚本操作DOM 的人都不得错过！2、margin加倍的问题。
网页设计中的DIV+CSS技术应用研究
网页设计中的DIV+CSS技术应用研究摘要：以目前非常流行的网页设计技术CSS+DIV为研究对象，阐述了该技术产生的背景，分析了该技术在实际应用中的优缺点，并在此基础上提出了能使该技术在应用上实现最优化的一系列方法。
关键词：DIV；CSS；网页布局；XMHTL0 引言“内容”与“形式”分离式的网页设计已成为时下静态网页设计的主流方向，整个网络刮起了一股“网站重构”的浪潮。
以“DIV控制网站的模块布局，CSS控制页面内容表现形式”的DIV+CSS技术为许多网页设计者带来了福音，但是在实际应用时也存在一些问题。
本文分析了CSS+DIV的产生背景，并对该技术的优缺点进行了探讨，然后在此基础上提出了一系列可行方法使该技术在网页设计中能做到扬长避短，将其功能发挥到最大化。
1 DIV+CSS产生的背景1.1 从HTML到XHMLHTML（Hypertext Markup Language）——超文本标记语言，它通过标记符号来标记要显示的网页中的各个部分，是传统基于TABLE布局的一种基本网页设计语言。
XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。
XHTML是一个基于XML的标记语言，XHTML是一种增强了的HTML，是基于“DIV+CSS”技术的一种网页设计语言。
建立XHTML的目的就是实现HTML向XML的过渡。
1.2 从TABLE到DIV+CSS最早期的TABLE布局网页是由表格的嵌套和合并拆分所实现，而所有的样式都直接在HTML代码中体现，样式与内容完全混合在一起。
后来，许多网页设计者会将整个网页设计分成两步：先直接在图像编辑软件生成一张网页的平面图，通过切片导出生成TABLE布局的网页；然后，利用网页编辑软件生成一些动态链接的效果。
但是这种两步走并不是真正意义上的“内容”与“样式”的分离，这样的网页代码中还是存在很多样式信息，也存在大量重复和冗余，同样不利于后期修改维护。
CSS Hack浏览器兼容IE6+IE7+IE8+IE9+FF
自从安装了IE8.0正式版本!就对基本的几个CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助!本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象HACK原理:不同浏览器对各中字符的识别不同(读完文章你会发现,FF和IE8对以下字符的识别能力完全相同)在CSS中常用特殊字符识别表:(1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;(2)!important: 除IE6不能识别 !important外, FF+IE8+IE7都能识别!important ;(3)_ : 除IE6支持_ 外, FF+IE8+IE7都不支持_;(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)示例:(1)区别FF(IE8)与IE6 IE7backgorund:orange; FF和IE8背景色将为橘黄色*backgorund:red; IE6和IE7背景色将为红色(2)区别FF(IE8)与IE6与IE7background:orange; FF和IE8背景色将为橘黄色*background:red !important; IE7背景色将为红色*background:blue; IE6背景色将为蓝色(3)区别FF(IE8)与IE6与IE7background:orange; FF和IE8背景色将为橘黄色*background:red; IE7背景色将为红色_background:blue; IE6背景色将为蓝色(4)区别FF与IE6 IE7 E8color:gray; FF等非IE浏览器字体色将为灰色color:red\9; IE8 IE9字体色将为红色*color:green; IE7字体色将为绿色_color:blue; IE6字体色将为蓝色提示:CSS HACK书写顺序:先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的！总结:实际运用中我感觉比较少用到!important ,只要你记住”*”和”_”我想就足够区别于FF(IE8)与IE6与IE7了.。
IE6-IE11兼容性问题列表及解决办法
IE6-IE11兼容性问题列表及解决办法2015/3/2 Bob Liu名目概述3第一章：HTML 4第一节：IE7-IE8更新41. 如果缺少终止标记的P 元素后跟TABLE、FORM、NOFRAMES 或NOSCRIPT 元素，会自动添加终止标记。
42. 支持格式正确的有效标记，不再支持格式错误的HTML。
63. Button标签的默认type类型从button改为submit。
74. 不再支持COL 及COLGROUP 元素的部分属性及为其设定的CS S 特性. 8第二节: IE8-IE9更新91. 表对象模式现在更加符合其他扫瞄器。
92. 文本布局使用自然度量而不是图形设备接口(GDI) 度量。
12第二章：CSS 15第一节：IE6-IE7更新151. 方框模型溢出内容现与方框相交，不再让方框自动增长适应内容。
152. 不再支持某些CSS 选择器（如*HTML、_underscore 和/**/ 注释）。
173. 已解决SELECT 元素不能被div覆盖的咨询题。
214. CSS样式区分大小写。
225.Style中的height, width结尾需要输入单位，如px 23第二节：IE7-IE8更新231. 不再支持CSS 表达式，改为支持增强的CSS 或DHTML 逻辑。
23第三节：IE8-IE9更新251. 泰语和东亚语文本和字体大小的显示可能小于其他字样。
252. 某些行为连接方法在XML 模式中不可用。
26第四节：IE9-IE10更新281. 不再支持CSS behavior，完全废弃htc表达式。
28第三章：Javascript and DOM 29第一节：IE6-IE7更新291. 不再承诺用于绕过window.close 提示的window.opener 技巧。
2 92. 从脚本创建的模式或无模式对话框看起来看起来略微变大。
30第二节：IE7-IE8更新311. 支持“class”语法，不再支持“className”属性语法。
browser兼容问题
浏览器兼容性目录基本概念1产生原因2解决方案2.1 对于一般用户来说2.2 对于网站开发者来说3CSS技巧基本概念浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。
在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。
而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。
1产生原因因为不同浏览器使用内核及所支持的HTML等网页语言标准不同；以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。
最常见的问题就是网页元素位置混乱，错位。
2解决方案对于一般用户来说应该用ie8兼容模式浏览网页, 而不应该用ie9或ie10渲染模式. 很多用户安装ie10后发生很多网页显示错乱, 就是兼容性的原因, 因为ie10默认的渲染模式是ie10. 此时应该将其改为ie7渲染模式。
为什么用ie6/7渲染模式的原因如下:中国所有网页肯定都支持ie, 支持ie就是支持ie内核的所有浏览器. 但并不一定支持chrome, firefox, 双核浏览器的高速模式, 原因很简单, 网页开发人员没有那么多时间和精力去兼容及测试那么多浏览器, 开发人员能让网页在ie下正常工作已经不错了, 就这还老得加班呢, 有那么多新需求和测试人员测出的bug要改啊[1].渲染模式和网页打开速度几乎没有关系, 用户感觉不到.对于网站开发者来说目前暂没有统一的能解决这样的工具，最普遍的解决办法就是不断的在各浏览器间调试网页显示效果，通过对css样式控制以及通过脚本判断并赋予不同浏览器的解析标准。
如果所要实现的效果可以使用框架，那么还有另一个解决办法是在开发过程中使用当前比较流行的JS，CSS框架框架，如jQuery，YUI等等，因为这些框架无论是底层的还是应用层的一般都已经做好了浏览器兼容，所以可以放心使用。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第一篇 DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性 ^' @ x/ W5 i3 G. N/ R4 |1 q) x6 z7 f! |# e a 在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网站，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网页可能出现意料之外的效果！' R) b5 f: S+ G7 s6 C6 ^( k0 }' z% P例子：$ ^. _$ S8 ]# f9 e3 ^. o3 t* R! x) y8 r. R/ ?+ n4 R# }) n7 {∙所有浏览器通用 height: 100px; F/ P- j7 B+ [' N Q9 U& r& w ∙IE6 专用 _height: 100px;2 w+ W5 N4 g# J∙IE6 专用 *height: 100px;+ ^/ H8 {1 s% z2 ^9 S. \∙IE7 专用 *+height: 100px;( Y5 v) K8 k2 {* ^5 r" n1 T∙IE7、FF 共用 height: 100px !important;# \; V8 y& O6 k2 b" I0 F6 s' C. R, V' J# K. E7 h& v' I2 e9 y- ?一、CSS 兼容2 e$ \; r$ |4 ?% }9 [5 s8 B+ D0 P0 C/ q以下两种方法几乎能解决现今所有兼容. " V1 F, S5 p# h" x5 R3 @% p0 q# x* O b* `2 A1, !important (不是很推荐，用下面的一种感觉最安全) $ a/ I+ h9 C6 Y" }5 W* S8 |1 e1 }: t% D& A随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.【石墨粉】e>#wrapper {width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}</style>2, IE6/IE77对FireFox <from 针对firefox ie6 ie7的css样式>3 r8 n# j0 R% e0 n' ^0 [- U7 g3 y+ p *+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""/TR/html4/loose.dtd"> 二、万能 float 闭合(非常重要) * V) y( N3 h, ~/ F- F3 D( u$ z3 B) l2 l$ {- B 可以用这个解决多个div对齐时的间距不对，将以下代码加入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> 三、其他兼容技巧(相当有用)s3 I; f9 T( b4 \( _. Z9 f" j2 m( I' e; K1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决); x+ T0 t; f/ e1 `5 D3 D0 v: i3 k7 r2 e 2, 居中问题. $ Y7 W; n8 T5 F- _0 E' j+ F8 Y0 S- P4 h+ U5 j$ c @5 v& ^9 k) v* U: M 1).垂直居中.将 line-height 设置为当前 div 相同的高度,【石墨】le.( 注意内容不要换行.); C5 t# N N1 J: ]. S( x2 z6 l, y7 W3 c5 C( l: t$ \4 I/ q2).水平居中. margin: 0 auto;(当然不是万能) 3 D0 }( w, O+ P5 I1 G 0 C! L* {0 ~' o5 H8 F3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签) + a1 u( f4 W* c7 l( f1 H2 b+ e2 r/ Z6 s/ y2 m2 Q% c, n6 M: @* [1 p 4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.5 p; t# E4 q" F7 k3 O3 c- J7 s4 m& p5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明,以避免不必要的麻烦. (常见于导航标签和内容列表) $ i& Y6 U! |, h7 z- a: Y8 t+ X& Q4 ^5 L7 s8 H. _8 Y6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.) d2 k4 k4 W9 O' F" U3 Q6 c! N) Z/ E7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.- s+ H. V5 R9 x0 L: w8 u$ W- M$ Q% I+ ~( @7 m' E6 d第二篇针对firefox ie6 ie7的css样式* {( I! P( l- U) ]; Q; \0 m9 h; r# p2 b6 n- P" x7 b; v/ i 什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。
而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。
这下就和谐了。
呵呵！2 h0 t E2 {6 ?8 H) R% h4 H3 m2 q/ ^+ u. F' g5 ~微软发布的IE7浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担，/12/0618/18/84A7PQPU0001125P.html虽然IE7已经走向标准化，但还是有许多和FF不同的地方，所以需要用到IE7的兼容，有许多朋友问过IE7的兼容是什么，其实我也不知道。
暂时还没找到IE7专用的兼容。
除了前面那片文章，《针对firefox ie6 ie7的css样式》中的兼容方式也是很好用的。
1 {% k& Z; e* V5 `/ b* f$ e; K+ r- S' l, \" W6 |有一点【/show/石墨】逻辑思想的人都会知道可以用IE和FF的兼容结合起来使用，下面介绍三个兼容，例如：（适合新手，呵呵，高手就在这里路过吧。
）1.第一个兼容，IE FF 所有浏览器公用（其实也不算是兼容）2.height:100px;3.第二个兼容 IE6专用4._height:100px;5.第三个兼容 IE6 IE7公用6.*height:100px;介绍完了这三个兼容了，下面我们再来看看如何在一个样式里分别给一个属性定义IE6 IE7 FF专用的兼容，看下面的代码，顺序不能错哦：1.height:100px;2.*height:120px;3._height:150px;下面我简单解释一下各浏览器怎样理解这三个属性： % H0 d# n& S+ K/ i3 `- e: A7 _- `4 m; f$ U' a e在FF下，第2、3个属性FF不认识，所以它读的是 height:100px;! z( D5 m. E1 p: x @6 p+ Q5 a, a7 U* E8 X( B在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性 *height:120px; 5 w3 f F: V$ g f) m9 ^; p% ?5 X% j1 p! K在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是第三个属性。
( l9 U- ~/ m1 }0 d. t& F& r 1 a1 [ a5 d) L6 f. J+ D6 Z1 针对firefox ie6 ie7的css样式( I" E" n. I+ H& m: K( r7 ~" }! K% s4 b' k6 r4 ?3 j& g# N 现在大部分【/石墨】都是用!important来兼容，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的兼容方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：1.#1 { color: #333; } /* Moz */2.* html #1 { color: #666; } /* IE6 */3.*+html #1 { color: #999; } /* IE*/那么在firefox下字体颜色显示为#333IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。