浏览器兼容性问题与解决方案.pdf

《浏览器兼容性问题与解决方案.pdf》由会员分享，可在线阅读，更多相关《浏览器兼容性问题与解决方案.pdf（86页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第 1 页 常见浏览器兼容性问题与解决方案 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到与必须要解决的问题。在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是准确按照设计图开发的前端开发人员，可以说是准确到1px 的，他们很容易就会发现设计图的缺乏，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的 bug，并且他们制作的页面后期易维护，代码重用问题少，

2、可以说是比拟结实放心的代码。第二类是根本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几 px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大局部不应该归咎于浏览器，而是他们的技术本身了。文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题。第 2 页 浏览器兼容问题一：不同浏览器的标签默认的外补丁与内补

3、丁不同 问题病症：随便写几个标签，不加样式控制的情况下，各自的margin 与 padding 差异较大。碰到频率:100%解决方案：CSS 里 *备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的 CSS 文件开头都会用通配符*来设置各个标签的内外补丁是 0。浏览器兼容问题二：块属性标签 float 后，又有横行的 margin情况下，在 IE6 显示 margin 比设置的大 问题病症:常见病症是 IE6 中后面的一块被顶到下一行 碰到频率：90%稍微复杂点的页面都会碰到，float 布局最常见的浏览器兼容问题 解决方案：在 float 的标签样式控制中参加 display

4、:inline;将其转化为行内属性 备注：我们最常用的就是 div+CSS 布局了，而 div 就是一个典型的块属性标签，横向布局的时候我们通常都是用 div float 实现的，横向的间距设置如果用 margin 实现，这就是一个必然会碰到的兼容性问题。第 3 页 浏览器兼容问题三：设置较小高度标签一般小于 10px，在IE6，IE7，遨游中高度超出自己设置高度 问题病症：IE6、7 与遨游里这个标签的高度不受控制，超出自己设置的高度 碰到频率：60%解决方案：给超出高度的标签设置 overflow:hidden;或者设置行高 line-height 小于你设置的高度。备注：这种情况一般出现

5、在我们设置小圆角背景的标签里。出现这个问题的原因是 IE8 之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会到达默认的行高。浏览器兼容问题四：行内属性标签，设置 display:block 后采用float 布局，又有横行的 margin 的情况，IE6 间距 bug 问题病症：IE6 里的间距比超过设置的间距 碰到几率：20%解决方案：在 display:block;后面参加display:inline;display:table;备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了 input 标签比拟特殊)。在用 flo

6、at 布局并有横向的 margin 后，在 IE6 下，他就具有了块属性 float 后的横向 margin的 bug。不过因为它本身就是行内属性标签，所以我们再加上第 4 页 display:inline 的话，它的高宽就不可设了。这时候我们还需要在display:inline 后面参加 display:talbe。浏览器兼容问题五：图片默认有间距 问题病症：几个 img 标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。碰到几率：20%解决方案：使用 float 属性为 img 布局 备注：因为 img 标签是行内属性标签，所以只要不超出容器宽度，img 标

7、签都会排在一行里，但是局部浏览器的 img 标签之间会有个间距。去掉这个间距使用 float 是正道。我的一个学生使用负margin，虽然能解决，但负 margin 本身就是容易引起浏览器兼容问题的用法，所以我制止他们使用 浏览器兼容问题六：标签最低高度设置 min-height 不兼容 问题病症：因为 min-height 本身就是一个不兼容的 CSS 属性，所以设置 min-height 时不能很好的被各个浏览器兼容 碰到几率：5%解决方案：如果我们要设置一个标签的最小高度 200px，需要进展的设置为：min-height:200px;height:auto!ImportAnt;heig

8、ht:200px;overflow:visible;备注：在 B/S 系统前端开时，有很多情况下我们又这种需求。当内容小于一个值如 300px时。容器的高度为 300px；当内容第 5 页 高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。浏览器兼容问题七：透明度的兼容 CSS 设置 做兼容页面的方法是：每写一小段代码 布局中的一行或者一块我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟

9、悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以与怎么去解决这些兼容问题。1./*CSS hack*/我很少使用 hacker 的，可能是个人习惯吧，我不喜欢写的代码IE 不兼容，然后用 hack 来解决。不过 hacker 还是非常好用的。使用 hacker 我可以把浏览器分为 3 类：IE6；IE7 与遨游；其他 IE8 Chrome ff Safari opera 等 IE6 认识的 hacker 是下划线_ 与星号*IE7 遨游认识的 hacker 是星号*比方这样一个 CSS 设置：1.height:300px;*height:200px;_height:100px;IE6

10、 浏览器在读到 height:300px 的时候会认为高时 300px；继续往下读，他也认识*heihgt，所以当 IE6 读到*height:200px 的第 6 页 时候会覆盖掉前一条的相冲突设置，认为高度是 200px。继续往下读，IE6 还认识_height,所以他又会覆盖掉 200px 高的设置，把高度设置为 100px；IE7 与遨游也是一样的从高度 300px 的设置往下读。当它们读到*height200px 的时候就停下了，因为它们不认识_height。所以它们会把高度解析为 200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为 300px。因为

11、优先级一样且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。在网站设计的时候，应该注意 css 样式兼容不同浏览器问题，特别是对完全使用 DIV CSS 设计的网，就应该更注意 IE6 IE7 FF 对CSS 样式的兼容，不然，你的网乱可能出去不想出现的效果！所有浏览器 通用 height:100px;IE6 专用 _height:100px;IE6 专用 *height:100px;第 7 页 IE7 专用 *+height:100px;IE7、FF 共用 height:100px!important;一、CSS 兼容 以下两种方法几乎能解决现今所有兼容.1,!importa

12、nt(不是很推荐，用下面的一种感觉最平安)随着IE7 对!important的支持,!important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)代码:#wrapper width:100px!important;/*IE7+FF*/width:80px;/*IE6*/第 8 页 2,IE6/IE77 对 FireFox *+html 与*html 是 IE 特有的标签,firefox 暂不支持.而*+html 又为 IE7 特有标签.代码:#wrapper width:120px;/*FireFox*/*html#wrapper width:80px;/*ie6 f

13、ixed*/*+html#wrapper width:60px;/*ie7 fixed,注意顺序*/注意:*+html 对 IE7 的兼容 必须保证 HTML 顶部有如下声明：代码:二、万能 float 闭合(非常重要!)可以用这个解决多个 div 对齐时的间距不对，第 9 页 关于 clear float 的原理可参见 How To Clear Floats Without Structural Markup 将以下代码参加 Global CSS 中,给需要闭合的 div 加上 class=clearfix 即可,屡试不爽.代码:/*Clear Fix*/.clearfix:after co

14、ntent:.;display:block;height:0;clear:both;visibility:hidden;.clearfix display:inline-block;/*Hide from IE Mac*/.clearfix display:block;/*End hide from IE Mac*/第 10 页/*end of clearfix*/*三、其他兼容技巧(相当有用)1,FF 下给 div 设置 padding 后会导致 width 与 height 增加,但 IE 不会.(可用!important 解决)2,居中问题.1).垂直居中.将 line-height 设

15、置为 当前 div 一样的高度,再通过 vetical-align:middle.(注意内容不要换行.)2).水平居中.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 不要定死高度,最好还加

16、上 overflow:hidden.以到达高度自适应.第 11 页 7,关于手形光标.cursor:pointer.而 hand 只适用于 IE.贴上代码:兼容代码:兼容最推荐的模式。/*FF*/.submitbutton float:left;width:40px;height:57px;margin-top:24px;margin-right:12px;/*IE6*/*html.submitbutton margin-top:21px;/*IE7*/*+html.submitbutton margin-top:21px;第 12 页 什么是浏览器兼容：当我们使用不同的浏览器Firefox

17、IE7 IE6访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写 CSS 的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种方法，能让你在一个 CSS 里面独立的写支持不同浏览器的样式。这下就与谐了。呵呵！最近微软发布的 IE7 浏览器的兼容性确实给一些网页制 作人员添加了一个沉重的负担，虽然 IE7 已经走向标准化，但还是有许多与 FF不同的地方，所以需要用到 IE7 的兼容，有许多朋友问过 IE7 的兼容是什么，其实我也不知道。暂时还没找到 IE7 专用的兼容。除了前面那片文章，针对 firefox

18、 ie6 ie7 的 css 样式中的兼容方式也是很好用的。有一点逻辑思想的人都会知道可以用 IE 与 FF 的兼容结合起来使用，下面介绍三个兼容，例如：适合新手，呵呵，高手就在这里路过吧。程序代码 第 13 页 第一个兼容，IE FF 所有浏览器 公用其实也不算是兼容 height:100px;第二个兼容 IE6 专用 _height:100px;第三个兼容 IE6 IE7 公用 *height:100px;介绍完了这三个兼容了，下面我们再来看看如何在一个样式里分别给一个属性定义 IE6 IE7 FF 专用的兼容，看下面的代码，顺序不能错哦：程序代码 height:100px;*height

19、:120px;_height:150px;下面我简单解释一下各浏览器怎样理解这三个属性：在 FF 下，第 2、3 个属性 FF 不认识，所以它读的是 height:100px;在 IE7 下，第三个属性 IE7 不认识，所以它读第 1、2 个属性，又因第 14 页 为第二个属性覆盖了第一个属性，所以 IE7 最终读出的是第 2 个属性*height:120px;在 IE6 下，三个属性 IE6 都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前 2 个属性，所以 IE6 最终读取的是第三个属性。1 针对 firefox ie6 ie7 的 css 样式 现在大局部都是用!importan

20、t 来兼容，对于 ie6 与 firefox 测试可以正常显示，但是 ie7 对!important 可以正确解释，会导致页面 没按要求显示！找到一个针对 IE7 不错的兼容方式就是使用“*+html，现在用 IE7 浏览一下，应该没有问题了现在写一个 CSS 可以这样：#1 color:#333;/*Moz*/*html#1 color:#666;/*IE6*/*+html#1 color:#999;/*IE*/第 15 页 那么在 firefox 下字体颜色显示为#333，IE6 下字体颜色显示为#666，IE7 下字体颜色显示为#999。2 css 布局中的居中问题 主要的样式定义如下：

21、body TEXT-ALIGN:center;#center MARGIN-RIGHT:auto;MARGIN-LEFT:auto;说明：首先在父级元素定义 TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中；对于 IE 这样设定就已经可以了。但在 mozilla 中不能居中。解决方法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个 DIV 里，你可以依次拆出多个 div，只要在每个拆出的 div 里定义 MARGIN-RIGHT:auto;MARGI

22、N-LEFT:auto;就可以了。第 16 页 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 产生的双倍距离#box float:left;width:100px;margin:0 0 0 100px;/这种情况之下 IE 会产生 200px 的距离 display:inline;/使浮动忽略 这里细说一下block,inlin

23、e 两个元素,Block 元素的特点是:总是在新第 17 页 行上开场,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是:与其他元素在同一行上,不可控制(内嵌元素);#box display:block;/可以为内嵌元素模拟为块元素 display:inline;/实现同一行排列的的效果 diplay:table;5 IE 与宽度与高度的问题 IE 不认得 min-这个定义，但实际上它把正常的 width 与 height 当作有 min 的情况来使。这样问题就大了，如果只用宽度与高度，正常的浏览器里 这两个值就不会变，如果只用 min-width 与min-height

24、 的话，IE 下面根本等于没有设置宽度与高度。比方要设置背景图片，这个宽度是比拟重 要的。要解决这个问题，可以这样：#box width:80px;height:35px;htmlbody#box width:auto;height:auto;min-width:80px;min-height:35px;6 页面的最小宽度 min-width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但 IE 不认得这个，而它实际上把 width 当做最小宽度来使。为了让这一命令在 IE 上也能第 18 页 用，可以把一个 放到 标签下，然后为 div 指定

25、一个类：然后 CSS 这样设计：#container min-width:600px;width:e-xpression(document.body.clientWidth 600“600px:“auto);第一个min-width是正常的；但第2行的width使用了Javascript，这只有 IE 才认得，这也会让你的 HTML 文档不太正规。它实际上通过 Javascript 的判断来实现最小宽度。7 去除浮动 .兼容 box display:table;/将对象作为块元素级的表格显示 或者 第 19 页 .兼容 box clear:both;或者参加:after 伪对象,设置在对象后发

26、生的内容，通常与 content配合使用，IE 不支持此伪对象，非 Ie 浏览器支持，所以并不影响到IE/WIN 浏览器。这种的最麻烦的#box:after content:“.;display:block;height:0;clear:both;visibility:hidden;8&nbp;DIV 浮动 IE 文本产生 3 象素的 bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有 3px 的间距.第 20 页#box float:left;width:800px;#left float:left;width:50%;#right width:50%;*html

27、#left margin-right:-3px;/这句是关键 HTML 代码 9 属性选择器(这个不能算是兼容,是隐藏 css 的一个 bug)piddivid 第 21 页 piddivid 这个对于 IE6.0 与 IE6.0 以下的版本都隐藏,FF 与 OPera 作用 属性选择器与子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比拟大,如 pid中,所有 p 标签中有id 的都是同样式的.10 IE 捉迷藏的问题 当 div 应用复杂的时候每个栏中又有一些链接，DIV 等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决

28、方法：对#layout 使用 line-height 属性 或者给#layout 使用固定高与宽。页面构造尽量简单。11 高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进展调节，特别是当内层对象使用 margin 或 paddign 时。例：第 22 页 p 对象中的内容 CSS：#box background-color:#eee;#box p margin-top:20px;margin-bottom:20px;text-align:center;解决方法：在 P 对象上下各加 2 个空的 div 对象 CSS 代码：.1height:0px;overflow:hidd

29、en;或者为DIV加上border属性。屏蔽 IE 浏览器也就是 IE 下不显示 *:lang(zh)select font:12px!important;/*FF,OP 可见*/select:empty font:12px!important;/*safari 可见*/这里 select 是选择符，根据情况更换。第二句是 MAC 上 safari 浏览器独有的。第 23 页 仅 IE7 识别 *+html 当面临需要只针对 IE7 做样式的时候就可以采用这个兼容。IE6 与 IE6 以下识别 *html 这个地方要特别注意很多地主都写了是 IE6 的兼容其实 IE5.x 同样可以识别这个兼容

30、。其它浏览器不识别。html/*/body select 这句与上一句的作用一样。仅 IE6 不识别 select display/*IE6 不识别*/:none;这里主要是通过 CSS 注释分开一个属性与值，流释在冒号前。仅 IE6 与 IE5 不识别 select/*/display/*IE6,IE5 不识别*/:none;这里与上面一句不同的是在选择符与花括号之间多了一个 CSS 注释。仅 IE5 不识别 第 24 页 select/*IE5 不识别*/display:none;这一句是在上一句中去掉了属性区的注释。只有 IE5 不识别 盒模型解决方法 selct width:IE5.x

31、 宽度;voice-family:;voice-family:inherit;width:正确宽度;盒模型的去除方法不是通过!important 来处理的。这点要明确。去除浮动 select:after content:.;display:block;height:0;clear:both;visibility:hidden;在 Firefox 中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个去除浮动的兼容来对父级做一次定义，那么就可以解决这个问题。截字省略号 select -o-text-overflow:ellipsis;text-overflow:ellips

32、is;white-space:nowrapoverflow:hidden;这个是在越出长度后会自行的截掉多出局部的文字，并以省略号结尾，很好的一个技术。只是目前 Firefox 并不支持。只有 Opera 识别 第 25 页 media all and(min-width:0px)select 针对 Opera 浏览器做单独的设定。以上都是写 CSS 中的一些兼容，建议遵循正确的标签嵌套(div ul li 嵌套构造关系)，这样可以减少你使用兼容的频率，不要进入理解误区，并不是一个页面就需要很多的兼容来保持多浏览器兼容)，很多情况下也许一个兼容都不用 也可以让浏览器工作得非常好，这些都是用来解

33、决局部的兼容性问题，如果希望把兼容性的内容也别离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS 中通过过滤器导入特别的样式，也有的是写在 HTML 中的通过条件来链接或是导入需要的补丁样式。IE5.x 的过滤器，只有 IE5.x 可见 media tty icontent:;/*/import ie5win.css;/*;/*/IE5/MAC 的过滤器，一般用不着 /*/*/import ie5mac.css;/*/第 26 页 下面是 IE 的条件注释，个人觉得用条件注释调用相应 兼容是比拟完美的多浏览器兼容的解决方法。把需要兼容的地方单独放到一个文件里面，当浏览器版本符合的

34、时候就可以调用那个被兼容的样式，这样不仅使用起来 非常方便，而且对于制作这个 CSS 本身来讲，可以更严格的观察到是否有必要使用兼容，很多情况下，当我本人写 CSS如果把全部代码包括兼容都写到一个 CSS 文件的时候的时候会很随意，想怎么兼容就怎么兼容，而你独立出来写的时候，你就会不自觉的考虑是否有必要兼容，是先兼容 CSS？还是先把主 CSS 里面的东西调整到尽可能的不需要兼容？当你仅用很少的兼容就让很多浏览器很乖很听话的时候，你是不是很有成就感呢？你知道怎么选 择了吧呵呵 IE 的 if 条件兼容 自己可以灵活使用参看这篇 IE 条件注释 Only IE 所有的 IE 可识别 只有 IE5

35、.0 可以识别 Only IE 5.0+IE5.0 包换 IE5.5 都可以识别 仅 IE6 可识别 Only IE 7/-第 27 页 IE6 以与 IE6 以下的 IE5.x 都可识别 Only IE 7/-仅 IE7 可识别 Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼容，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的 CSS让 IE6,Ie7,Firefox,甚至 Safari,Opera 运行起来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道 IE 与 Fir

36、efox 并不不是那么的不与谐，我们找到一定的方法，是完全可以让他们与谐共处的。不要你认为发现了兼容的方法，你就掌握了一切，我们并不是兼容的奴隶。div ul li 的嵌套顺序 今天只讲一个规那么。就是的三角关系。我的经历就是在最外面，里面 是，然后再是，当然里面又可以嵌套什么的，但是并不建议你嵌套很多 东西。当你符合这样第 28 页 的规那么的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是里面放，而不 用的时候，你会发现你的间隙十分难控制，一般情况下，IE6 与 IE7 会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前 面的内容又空了很大一块，出现这种情况虽然你可以

37、改变 IE 的 Margin，然后调整 Firefox 下面的 Padding，以便使得两者显示起来得效果很相 似，但是你得 CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来兼容它们，但是你会烦得要命。具体嵌套写法 遵循上面得嵌套方式，然后在CSS 里面告诉 ul Margin:0pxadding:0px;list-style:none;，其中 list-style:none 是不让标记的最前方显示圆点或者数字等目录类型的标记，因为 IE 与 Firefox 显示出来默认效果有些不一样。因此这样不需要做任何手脚，你的 IE6、与 IE7、Firefox 显

38、示出来的东西(外距，间距，高度，宽度)就几乎没什么区别了，也许细心的你会在某一个时刻发现一、两个象素的差异，但那已经很完美了，不需要你通过调整大片的 CSS 来控制它们的显示了，你愿意，你可以仅仅兼容一两个地方，而且通常这种兼容可以适应各种地方，不需要你重复在不同的地方调试不同的兼容方式减轻你的烦 overflow:hidden;第 29 页 这个是在越出长度后会自行的截掉多出局部的文字，并以省略号结尾，很好的一个技术。只是目前 Firefox 并不支持。只有 Opera 识别 media all and(min-width:0px)select 针对 Opera 浏览器做单独的设定。以上都是

39、写 CSS 中的一些兼容，建议遵循正确的标签嵌套(div ul li 嵌套构造关系)，这样可以减少你使用兼容的频率，不要进入理解误区，并不是一个页面就需要很多的兼容来保持多浏览器兼容)，很多情况下也许一个兼容都不用 也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也别离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS 中通过过滤器导入特别的样式，也有的是写在 HTML 中的通过条件来链接或是导入需要的补丁样式。IE5.x 的过滤器，只有 IE5.x 可见 media tty icontent:;/*/import ie5win.css;/*;/

40、*/IE5/MAC 的过滤器，一般用不着 第 30 页/*/*/import ie5mac.css;/*/下面是 IE 的条件注释，个人觉得用条件注释调用相应 兼容是比拟完美的多浏览器兼容的解决方法。把需要兼容的地方单独放到一个文件里面，当浏览器版本符合的时候就可以调用那个被兼容的样式，这样不仅使用起来 非常方便，而且对于制作这个 CSS 本身来讲，可以更严格的观察到是否有必要使用兼容，很多情况下，当我本人写 CSS如果把全部代码包括兼容都写到一个 CSS 文件的时候的时候会很随意，想怎么兼容就怎么兼容，而你独立出来写的时候，你就会不自觉的考虑是否有必要兼容，是先兼容 CSS？还是先把主 CS

41、S 里面的东西调整到尽可能的不需要兼容？当你仅用很少的兼容就让很多浏览器很乖很听话的时候，你是不是很有成就感呢？你知道怎么选 择了吧呵呵 IE 的 if 条件兼容 自己可以灵活使用参看这篇 IE 条件注释 Only IE 所有的 IE 可识别 只有 IE5.0 可以识别 Only IE 5.0+第 31 页 IE5.0 包换 IE5.5 都可以识别 仅 IE6 可识别 Only IE 7/-IE6 以与 IE6 以下的 IE5.x 都可识别 Only IE 7/-仅 IE7 可识别 Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼容，很多的!importan

42、t 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的 CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起 来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道 IE 与 Firefox 并不不是那么的不与谐，我们找到一定的方法，是完全可以让他们与谐共处的。不要你认为发现了兼容的方法，你就掌握了一切，我们并不是兼容的奴隶。div ul li 的嵌套顺序 第 32 页 今天只讲一个规那么。就是的三角关系。我的经历就是在最外面，里面 是，然后再是，当然里面又可以嵌套什么的，但是并不建议你嵌套很多 东西。当你符合这样的规那么的

43、时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是里面放，而不 用的时候，你会发现你的间隙十分难控制，一般情况下，IE6 与 IE7 会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前 面的内容又空了很大一块，出现这种情况虽然你可以改变 IE 的 Margin，然后调整 Firefox 下面的 Padding，以便使得两者显示起来得效果很相 似，但是你得 CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来兼容它们，但是你会烦得要命。具体嵌套写法 遵循上面得嵌套方式，然后在CSS 里面告诉 ul Margin:0pxadding:0px;l

44、ist-style:none;，其中 list-style:none 是不让标记的最前方显示圆点或者数字等目录类型的标记，因为 IE 与 Firefox 显示出来默认效果有些不一样。因此这样不需要做任何手脚，你的 IE6、与 IE7、Firefox 显示出来的东西(外距，间距，高度，宽度)就几乎没什么区别了，也许细心的你会在某一个时刻发现一、两个象素的差异，但那已经很完美了，不第 33 页 需要你通过调整大片的 CSS 来控制它们的显示了，你愿意，你可以仅仅兼容一两个地方，而且通常这种兼容可以适应各种地方，不需要你重复在不同的地方调试不同的兼容方式减轻你的烦 overflow:hidden;这

45、个是在越出长度后会自行的截掉多出局部的文字，并以省略号结尾，很好的一个技术。只是目前 Firefox 并不支持。只有 Opera 识别 media all and(min-width:0px)select 针对 Opera 浏览器做单独的设定。以上都是写 CSS 中的一些兼容，建议遵循正确的标签嵌套(div ul li 嵌套构造关系)，这样可以减少你使用兼容的频率，不要进入理解误区，并不是一个页面就需要很多的兼容来保持多浏览器兼容)，很多情况下也许一个兼容都不用 也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也别离出来，不妨试一下下面的几种过滤器。这些过滤

46、器有的是写在 CSS 中通过过滤器导入特别的样式，也有的是写在 HTML 中的通过条件来链接或是导入需要的补丁样式。IE5.x 的过滤器，只有 IE5.x 可见 media tty 第 34 页 icontent:;/*/import ie5win.css;/*;/*/IE5/MAC 的过滤器，一般用不着 /*/*/import ie5mac.css;/*/下面是 IE 的条件注释，个人觉得用条件注释调用相应 兼容是比拟完美的多浏览器兼容的解决方法。把需要兼容的地方单独放到一个文件里面，当浏览器版本符合的时候就可以调用那个被兼容的样式，这样不仅使用起来 非常方便，而且对于制作这个 CSS 本身

47、来讲，可以更严格的观察到是否有必要使用兼容，很多情况下，当我本人写 CSS如果把全部代码包括兼容都写到一个 CSS 文件的时候的时候会很随意，想怎么兼容就怎么兼容，而你独立出来写的时候，你就会不自觉的考虑是否有必要兼容，是先兼容 CSS？还是先把主 CSS 里面的东西调整到尽可能的不需要兼容？当你仅用很少的兼容就让很多浏览器很乖很听话的时候，你是不是很有成就感呢？你知道怎么选 择了吧呵呵 IE 的 if 条件兼容 自己可以灵活使用参看这篇 IE 条件注释 Only IE 第 35 页 所有的 IE 可识别 只有 IE5.0 可以识别 Only IE 5.0+IE5.0 包换 IE5.5 都可以

48、识别 仅 IE6 可识别 Only IE 7/-IE6 以与 IE6 以下的 IE5.x 都可识别 Only IE 7/-仅 IE7 可识别 Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼容，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的 CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起 来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道 IE 与 Firefox 并不不是那么的不与谐，我们找到一定的方法，第 36 页 是完全可以让他们与谐共处的。

49、不要你认为发现了兼容的方法，你就掌握了一切，我们并不是兼容的奴隶。div ul li 的嵌套顺序 今天只讲一个规那么。就是的三角关系。我的经历就是在最外面，里面 是，然后再是，当然里面又可以嵌套什么的，但是并不建议你嵌套很多 东西。当你符合这样的规那么的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是里面放，而不 用的时候，你会发现你的间隙十分难控制，一般情况下，IE6 与 IE7 会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前 面的内容又空了很大一块，出现这种情况虽然你可以改变 IE 的 Margin，然后调整 Firefox 下面的 Padding，以便使得两者显

50、示起来得效果很相 似，但是你得 CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来兼容它们，但是你会烦得要命。具体嵌套写法 遵循上面得嵌套方式，然后在CSS 里面告诉 ul Margin:0pxadding:0px;list-style:none;，其中 list-style:none 是不让标记的最前方显示圆点或者数字等第 37 页 目录类型的标记，因为 IE 与 Firefox 显示出来默认效果有些不一样。因此这样不需要做任何手脚，你的 IE6、与 IE7、Firefox 显示出来的东西(外距，间距，高度，宽度)就几乎没什么区别了，也许细心的你会在某一个