2022年2022年浏览器兼容性知识 .pdf

《2022年2022年浏览器兼容性知识 .pdf》由会员分享，可在线阅读，更多相关《2022年2022年浏览器兼容性知识 .pdf（3页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、简介这个针对不同的浏览器写不同的CSS code 的过程，就叫CSS hack! CSS Hack的原理是什么由于不同的浏览器对CSS 的支持及解析结果不一样，还由于CSS 中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。CSS Hack 大致有 3 种表现形式， CSS 类内部 Hack、选择器 Hack 以及 HTML 头部引用(if IE)Hack ，CSS Hack 主要针对IE 浏览器。类内部 Hack：比如IE6 能识别下划线 _和星号 * ，IE7 能识别星号 * ，但不能识别下划线 _，而firefox两个都不能认识。等等选择器Hack：比如IE6 能识

2、别*html .class ，IE7 能识别 *+html .class 或者 *:first-child+html .class。等等HTML 头部引用 (if IE)Hack ：针对所有IE：，针对 IE6 及以下版本： ，这类 Hack 不仅对 CSS 生效，对写在判断语句里面的所有代码都会生效。书写顺序， 一般是将识别能力强的浏览器的CSS 写在后面。下面如何写里面说得更详细些。编辑本段如何写CSS Hack 比如要分辨IE6 和 firefox 两种浏览器，可以这样写： div background:green; /* for firefox */ *background:red;

3、/* for IE6 */ 我在 IE6 中看到是红色的，在firefox 中看到是绿色的。解释一下：上面的 css 在 firefox 中，它是认识不了后面的那个带星号的东东是什么的， 于是将它过滤掉，不予理睬， 解析得到的结果是:divbackground:green, 于是理所当然这个 div 的背景是绿色的。在IE6中 呢 ， 它 两 个background都 能 识 别 出 来 ， 它 解 析 得 到 的 结 果是:divbackground:green;background:red;,于是根据优先级别，处在后面的red 的优先级高，于是当然这个div 的背景颜色就是红色的了。CSS

4、 hack:区分 IE6，IE7，firefox 区别不同浏览器，CSS hack 写法：区别 IE6 与 FF：background:orange;*background:blue; 区别 IE6 与 IE7：background:green !important;background:blue; 区别 IE7 与 FF：background:orange; *background:green; 区 别FF ， IE7 ， IE6 ：background:orange;*background:green;_background:blue; background:orange;*backgro

5、und:green !important;*background:blue; 注： IE 都能识别 *;标准浏览器 (如 FF)不能识别 *；IE6 能识别 *，某些情况下不能识别!important, IE6 支持重定义中的!important ， 例如：.yuanxin color:#e00!important; .yuanxin color:#000; 你将会发现定义了样式class=yuanxin时，在 IE 下，字体显示为红色（#e00） 。但不支持同一定义中的!important 。例如：.yuanxin color:#e00!important;color:#000 此时在 IE

6、6 下不支持， 你将会发现定义了样式class=yuanxin时，字体显示为黑色 （#000） 。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 3 页 - - - - - - - - - IE7 能识别 *，也能识别 !important; FF 不能识别 *，但能识别 !important; IE6 IE7 FF * !important 浏览器优先级别:FFIE7IE6,CSS hack书写顺序一般为FF IE7 IE6 以: #demo width:100px;

7、为例 ; #demo width:100px; /*被 FIREFOX,IE6,IE7执行 .*/ * html #demo width:120px; /* 会被 IE6 执行 ,之前的定义会被后来的覆盖,所以 #demo 的宽度在 IE6 就为 120px; */ *+html #demo width:130px; /*会被 IE7 执行 */ 所以最后 ,#demo 的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px; IE8 最新 css hack：9例:border:1px 9;.这里的 9 可以区别所有IE 和 FireFox. *I

8、E6、IE7 可以识别 .IE8、 FireFox 不能 . _IE6 可以识别 _,IE7 、IE8、FireFox不能 . 参考文献： http:/ 下面是我总结我自己对于多浏览器兼容的一些解决思路以及经验分享。由于逻辑和思路上有些混乱，所以写出来的东西也不是特别明晰，还请大家将就一些。一，目标在不同浏览器上的位置不同的问题1，首先，不要急着去找hack，而是看看自己写的代码有没有错误等，2，然后，尽量让目标的位置初始化，使之在所有浏览器都处在同一个位置，这个条件的前提是，不写hack。3，最后再一个方位一个方位调整。也就是遵循xy 轴来。4，结果可能会有 1-2 个像素的区别，但影响应该

9、不大，而且也减少了hack。说起来其实很简单，但是要做到，却是比较繁琐的一件事。二，目标与目标之间距离在各个浏览器上的区别。如果按照上面一的方法没办法解决，那就用背影法（自己研究出来的。）1，给其中一个目标加上黑色背景，或则其他颜色背景，颜色自定。2，观察黑色背景与另外一个目标的距离，查看是不是这个目标造成的距离问题3，如果不是上一个目标，那就给另外一个目标也加上背景颜色。4，这样很容易判断出那个目标造成的原因，就针对那个目标进行修改。还是不要写 hack 5，如果 2 个都不是，那么可能是其中一个的margin 造成原因，每个都初始化margin 试试。如果还不是，那可能是中间有其他代码了。

10、再不是，那不可能了，就是你上面的问题没排查清楚。三，兼容问题最多的一个，浮动问题。首先你要连接 IE6.0 下的 3 个与众不同的 bug 1，因宽度等同而撑开名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 3 页 - - - - - - - - - 2，因容器浮动，不浮动的容器使用外补丁而产生的双边距离3，左右浮动容器与中间不浮动容器的3 像素距离问题。然后就是清除浮动问题。这个就需要比较通用兼容的代码了.cc:after content: “. ”;display:

11、block;height:0;clear: both;visibility: hidden; .cc display: inline-block;/* Hides from IE-mac */ * html .cc height: 1%; .cc display: block;/* End hide from IE-mac */*清除浮动代码*/ .cclear:both;height:0px;font:0px/0px Arial;overflow:hidden; .cc 就专门使用在有浮动容器的父容器里而.c 就要按照 使用，中间不能放东西，主要就是如果上面的想跟下面的分开，而不要错位，那就

12、放到浮动容器的下面。也有朋友提出 .c 里面可以放东西的，比如   还可以通过 W3C 验证。而空标签会警告提示，这些我本人没有测试过，有兴趣的朋友可以自己测试一下看看。这里还向大家推荐一款测试网页兼容性的软件IETester ，IETester 支持在Windows xp,Windows vista以及 Windows 7 平台上运行， 你可以很容易的在IE6，IE7，IE8 版本之间进行切换浏览。这个程序甚至可以并排对比两个不同的版本。而且对中文的支持也很不错。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 3 页 - - - - - - - - -