解决各版本浏览器ie兼容性_浏览器的ie兼容性资源-CSDN文库

5星 · 超过95%的资源需积分: 18 102 浏览量 2013-04-12 15:13:07 上传评论 1 收藏 19KB DOC 举报

资源推荐

资源详情

资源评论

想必做网页设计的盆友们对各个浏览器的兼容问题很头疼吧特别是可恶的 IE 家庭，强大

的 BUG 之国带给网页设计师们的是伤不起啊，由于不同的浏览器对 CSS 的支持及解析结

果不一样，还由于 CSS 中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写

不同的 CSS。　

CSS Hack 大致有 3 种表现形式，CSS 类内部 Hack、选择器 Hack 以及 HTML 头部引用(if

IE)Hack，CSS Hack 主要针对 IE 浏览器。　　

类内部 Hack：比如 IE6 能识别下划线"_"和星号" * "，IE7 能识别星号" * "，但不能识别下

划线"_"，而 firefox 两个都不能认识。等等　　

选择器 Hack ：比如 IE6 能识别 *html .class{} ， IE7 能识别 *+html .class{} 或者 *:first-

child+html .class{}。等等　　

HTML 头部引用(if IE)Hack：针对所有 IE：<![endif]-->，针对

IE6 及以下版本：<![endif]-->，这类 Hack 不仅对 CSS 生效，

对写在判断语句里面的所有代码都会生效。　　

书写顺序，一般是将识别能力强的浏览器的 CSS 写在后面。下面如何写里面说得更详细些。

编辑本段如何写 CSS Hack　　

比如要分辨 IE6 和 firefox 两种浏览器，可以这样写：　　

<style> 　　

div{ 　　background:green; /* for firefox */ 　　

*background:red; /* for IE6 */ (both IE6 && IE7) 　　} 　　

</style> 　　

我在 IE6 中看到是红色的，在 firefox 中看到是绿色的。　　

解释一下：　　

上面的 css 在 firefox 中，它是认识不了后面的那个带星号的东东是什么的，于是将它过滤

掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个 div 的背景是

绿色的。　　

在 IE6 中呢，它两个 background 都能识别出来，它解析得到的结果

是:div{background:green;background:red;},

于是根据优先级别，处在后面的 red 的优先级高，于是当然这个 div 的背景颜色就是红色的

了。　　

CSS 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;*background: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}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

whiskyjn2012

2013-11-04

虽然不是我要的，可是也写的很好，学习了
核桃01

2014-03-20

下来看看再说，感觉这个好难
wangjianhong8

2014-07-11

很有用，正好遇到类似的问题
q310101

2013-10-29

虽然不是我要的，可是也写的很好，学习了。
olym2012

2014-05-15

挺不错的，挺具体的，好

前往

页

cys138138

粉丝: 0
资源: 4

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip