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 那样,造成浪费;

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

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

  1. 针对不同浏览器,CSS如何写

    我们在开发DIV+CSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6.微软IE7.微软IE8.火狐浏览器.谷歌浏览器有一些不同,如宽度.高度等地方有相差误.IE6比较老的版本浏览 ...

  2. 关于只针对ie7浏览器的css问题

    如代码: .centerDiv .search_k2{ margin-left: 18px; *margin-left: 9px; margin-top: 10px; height: 40px;} 中 ...

  3. style、currentStyle、getComputedStyle(不同浏览器获取css样式)区别介绍

    style.currentStyle.getComputedStyle区别介绍   样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样 ...

  4. 针对IE浏览器里面CSS的Bug解决方法

    IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是 ...

  5. 浏览器间CSS样式兼容问题

    1.display:table居中显示 在chrome和safari浏览器上兼容问题 2.滤镜 在chrome浏览器中能正常显示,在360浏览器中不能正常显示 3.省略号问题 对于一行显示,基本上对所 ...

  6. 修改chrome浏览器默认css样式的方法

    最近重新用起了ubuntu kylin,然后又碰到之前让我感到有些难受的一个小问题:用chrome浏览部分网页时,一部分粗体字十分难看,就像是宋体直接加粗那样. 之前就觉得这样看起来很难受,但是找到的 ...

  7. IE8 CSS样式兼容性清单

    IE8对于CSS2.1是完整支持的,对于CSS3则只是部分支持.下文中只列出IE8完全支持及完全不支持的样式,对于. 注:下文中的E.F均指html标签名,如p,img等. At-rules At类规 ...

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

    /***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child ...

  9. 有关css和js针对不同浏览器兼容的问题

    首先谈一下浏览器,虽然现在ie依然是浏览器市场的老大,大约占有67%的份额,但是由于其各方面的欠缺,用户开始选择其他浏览器作为自己浏览网页的主要 工具,比如firefox.theworld.maxth ...

随机推荐

  1. python select poll epoll的区别

    select 优点:为最早的异步io处理模块,他可以再linux上和windows上使用,跨平台兼容性好,而poll和epoll都不能在windows系统环境中使用. 缺点:select的机制决定了他 ...

  2. HTML(五)选择器--伪类选择器

    HTML代码 <body> <a href="www.baidu.com">www.baidu.com</a> </body> CS ...

  3. MySQL 数据库备份策略:全备与增量备份

    一.备份策略1.周日全备份,周一至周六增量备份2.全备份目录/u03/backup/innobackup/full_backup3.增量备份目录/u03/backup/innobackup/incre ...

  4. RabbitMQ arguments参数设置

    有发布端.消费端.消息路由.消息生命周期和身份认证标识等模块参数的设置. 具体请参考地址:http://www.rabbitmq.com/extensions.html

  5. asp.net MVC之Result过滤器浅析

    在asp.net MVC中,每一个Action方法完成之后都会返回一个结果,而我们可以在Result过滤器中根据需要修改这个结果.例如可以根据UserAgent来判断客户端的来源是手机还是PC端,从而 ...

  6. Java面向对象的三大特性之一 多态

    多态: 子类重写父类方法 1)位置:子类和父类中有同名的方法 2)方法名相同,返回类型和修饰符相同,参数列表相同       方法体不同 多态的优势和应用场合 多态:同一个引用类型,使用不同的实例而执 ...

  7. 奇怪问题之@RequestBody问题

    在项目中使用到了@RequestBody注解:该注解的作用是获取Request请求中body中的数据:最近测试项目的时候发现调用该接口的时候直接返回状态400,当将@RequestBody注解去掉以后 ...

  8. 1080 MOOC期终成绩

    对于在中国大学MOOC(http://www.icourse163.org/ )学习“数据结构”课程的学生,想要获得一张合格证书,必须首先获得不少于200分的在线编程作业分,然后总评获得不少于60分( ...

  9. Mysql使用information.shema.tables查询数据库表大小

    简介: information_schema数据库中的表都是只读的,不能进行更新.删除和插入等操作,也不能加触发器,因为它们实际只是一个视图,不是基本表,没有关联的文件. 元数据描述数据的数据,用于描 ...

  10. struts2应用

    1.处理表单数据 GreetingAction public class GreetingAction extends ActionSupport{ private String username; ...