针对IE浏览器的CSS样式(兼容性)

1. IE hacks:

"_"  是IE6 专有的hack;
"\9" 对IE6-IE10都有效;
"\0"对IE8-IE10都有效;
"\9\0"对IE9-IE10都有效;

优点:

CSS hacks 内嵌在普通的 CSS 里面,不会产生更多 HTTP 请求。CSS hacks 内嵌在普通的 CSS 里面,编写时比较方便。

缺点:

     它是不标准的产物。内嵌在其他 CSS 中,不便维护。尤其是当 hacks 的数量比较多的时候维护简直是个恶梦。内嵌在其他 CSS 中,即使在非 IE 浏览器中也会被加载,浪费资源。

2.条件注释 CSS:

<!--[if IE 6 ]>
   < link rel="stylesheet" type="text/css" media="all" href="./ie6.css" />
< ![endif]-->

<!--[if lte IE 8 ]>    <link rel="stylesheet" type="text/css" media="all" href="./assets/css/ie8.css" /> <![endif]-->

条件注释是一种 IE 专有的、对常规(X)HTML 注释的 Miscrosoft 扩展。从 W3C 标准来说,它也是不标准的产物,但它是微软官方推出的针对 IE 进行开发的方式,

  并且条件注释对于其他所有浏览器作为常规注释出现,因此对其他浏览器无害

优点:

  条件注释 CSS 的好处是在独立的 CSS 文件中编写,能准确控制在特定的 IE 中加载,不会造成资源浪费,并且便于维护。

缺点:

就是会产生多余的 HTTP 请求,尤其是当你需要兼容的 IE 版本很多的时候,你就需要产生多个 HTTP 请求,这对于本来通道数目就少的低版本 IE 来说无疑会影响页面加载速度。

                      以上两种方法不是很好,以下的方法相对来说会好点;

3.条件注释 html 标签:

  这种方案也是利用条件注释,但并不是对 CSS 使用条件注释,而是对 html 标签使用条件注释,引入不同的 class ,从而区分不同的 IE 以及其他浏览器;

<!DOCTYPE html>  
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]-->  

   然后把对特定 IE 的 CSS 加上相应的 class 并写在普通 CSS 文件里即可: .ie6 .header .nav {margin:0 0 0 ;padding:0 0 0 0; }

  优点:

    条件注释表达式的好处在于不会产生多余的 HTTP 请求;

  缺点:

    由于这些针对特定 IE 的 CSS 与普通的 CSS 放在一起,即不是相应的 IE 也会被加载,因此如果 CSS 数目比较多的话就会像使用 hacks 那样,造成浪费;

                      以上方法:需要根据具体情况选择方法。

时间: 2024-11-04 22:31:59

针对IE浏览器的CSS样式(兼容性)的相关文章

IE浏览器和主流浏览器对css样式背景透明,字体不透明的处理方法

刚学习了css兼容性问题,兼容性问题是我们前端开发者必须要跨越的一道鸿沟,对于不同浏览器,我们都要考虑其兼容性,代码的可操作性,因为同一段代码可能在谷歌和火狐等等主流浏览器上显示是正常的,但是在IE浏览器上却显示的很怪异,尤其以IE6为主要照顾对象. 其他不多说,这里如标题所写的一样,我主要是解决css里实现背景透明而文字不透明的方法,经测试,自己写的代码在IE和非IE浏览器上都能正常显示,有代码不足之处,让大家指正,大家的努力才能创造我们web前端的明天. 在非IE浏览器下要实现背景和字体一起

浏览器间CSS样式兼容问题

1.display:table居中显示 在chrome和safari浏览器上兼容问题 2.滤镜 在chrome浏览器中能正常显示,在360浏览器中不能正常显示 3.省略号问题 对于一行显示,基本上对所有的浏览器而言,没有什么兼容问题,但对于多行显示时,就会存在一些问题,css3样式中有专门针对webkit浏览器多行显示的省略号,但这种样式在其他浏览器中,可能就会没有效果 更新中... 记录自己在码代码过程中遇到的问题.

针对铁定浏览器的css选择符

/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body #c

css样式重置,不建议用通配符

由于各个浏览器对css样式的默认样式不一致,所以有必要进行样式重置.在网上看到很多建议使用 *{margin:0;padding:0} 重置margin和padding.建议不这样子使用,原因主要是性能问题.如果用通配符重置样式,那么势必会花费很大时间.网站打开速度变慢. 所以reset时,按需而行.用到哪些标签就设置重置.

IE浏览器常见CSS兼容性问题及解决办法

对于前端开发者来讲,世界上存在着一个神奇的东西——IE浏览器,尤其是低版本的IE浏览器,惨不忍睹的兼容性使其臭名昭著.前端工作者很多的时间都花在了和它打交道上,所以大家纷纷吐槽IE浏览器如何的渣,简直是万恶之源.但是IE浏览器市场份额有非常大,喷完还要接着搞兼容.对于IE浏览器来讲,我们应该有一个客观的评价.首先其兼容性差,原因可想而知,更新速度太慢,要几年才出一个版本,而市场上的FireFox.chrome等浏览器几个月就有一个版本上市.中间那么长的时间足以将其bug充分的暴露出来,其他浏览器

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

css样式(火狐的兼容性问题)

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 和 wid

DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异

IE与FF浏览器之间的一些重要差异: ·IE与FF的居中方式不一样. (1)如何让body体能够在IE与FF浏览器中都居中的例子: [html] view plaincopyprint? <html> <head> <title>让body容器在浏览器中居中</title> <link rel="stylesheet" type="text/css" href="body_center.css"

针对各种浏览器css不兼容的写法

/*针对谷歌浏览器内核支持的CSS样式*/@media screen and (-webkit-min-device-pixel-ratio:0) { 样式 } /*针对IE6特制识别的CSS样式*/*HTML .SearchBox{ 样式 } 针对Firefox浏览器的内核CSS写法:@-moz-document url-prefix() {.font1 {color:red}} IE8就是自己来调试了.调试一个浏览器,有不合适的地方可以在该内核css中重写对应的方法,只需把不合适的样式重写即