关于IE浏览器实在太坑爹了，但你又不得不去解决它，不过就本人所知，IE8—IE10差别不大，至少本人还没有遇到过在IE8环境下到了IE9及以上版本就出现坑爹的问题，但我们又不得不面对IE8以下的版本，说实话，我也不想去处理IE所谓的Bug，但又不得不去处理。谁叫我们都是干苦逼的职业的！

一、CSS规则（IE CSS hacks）

其实也只是在样式里说明一下只有IE识别的CSS规则。比如，在CSS属性前置一个”*”区分IE7和低版本，而前置一个”_”则区分IE7及低版本。但是这个方法最好别用（不是我不推荐），因为这个CSS规则还不能被W3C CSS识别（这就是坑爹之处）。

  • * IE8 及 低版本: 在CSS属性后置”\9″, 如 height:100%\9;
  • * IE7 及 低版本: 在CSS属性前置”*”, 如 *height:100%;
  • * IE6 及 低版本: 在CSS属性前置”_”, 如 _height:100%;
 .joks {

     background: gray; /* standard */

     background: pink\9; /* IE 8 and below */

     *background: green; /* IE 7 and below */

     _background: blue; /* IE 6 */

 }

二、给HTML加个if条件判断

这办法其实是Paul Irish大神发明的。它实现的办法是通过IE条件判断来给HTML设置不同的className，然后在CSS中通过给不同的className下的后代设置不同的样式即可实现。这个办法比较可行，W3C能识别。

 <!--[if lt IE 7 ]>

 <html class="ie6"> < ![endif]-->

 <!--[if IE 7 ]> </html>

 <html class="ie7"> < ![endif]-->

 <!--[if IE 8 ]>

  </html>

 <html class="ie8"> < ![endif]-->

 <!--[if IE 9 ]>

 </html>

三、用IE条件判断语句

其实说白了，这个方法大家都在用，而且用的人还挺多的，没办法，至少大牛们是不会这么干的（别急，大牛的方法我会讲的。）

IE条件判断语句也许是用的最多的区分IE版本(IE6, IE7, IE8)的办法了（我刚刚已经说了，IE8以上的版本差别不大）。看看下面用来区分IE不同版本的代码：

  • <!--[if IE 8]> = IE8版本
  • <!--[if lt IE 8]> = IE7版本以低版本
  • <!--[if gte IE 8]> = IE8版本及高版本
 <!--[if IE 8]>

 <style type="text/css">

     /* css for IE 8 */

 </style>

 < ![endif]-->

 <!--[if lt IE 8]>

     <link href="ie7.css" rel="stylesheet" type="text/css" />

 < ![endif]-->

四、自我感觉方法（大牛靠感觉来做）

这个方法我可不推荐，但是如果你了解每个版本的Bug的话，那你到可以试试，当然了，IE6和IE7再到IE8识别的间距有所不同，但当你设计版面的时候，我个人推荐你可以试试把间距扩大到20px以上，这样才不会出现IE间距的Bug，当然了，其它的Bug方式还有许多，这里我就不一一介绍了！至少我想说，避免Bug是不可能的，规则是死的，但方法是活的，靠的是想像力而已。

如何让CSS区别IE版本的更多相关文章

  1. asp.net mvc处理css和js版本问题

    当服务的修改了js和css内容后,发布到IIS服务器上,总是导致客户端内容显示不正确,原因是客户端存在缓存,还是加载的原来的js和css问题. 在css或js后面添加版本号,例如: <scrip ...

  2. 15款不容错过的前端开发Javascript和css类库 - 2017版本~

    前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, Core ...

  3. link和@import引入css 区别，不建议使用@import

    众多周知,有两种方法可以在页面中导入样式文件. <link href="a.css" rel="stylesheet"> <style> ...

  4. jQuery设置checkbox全选（区别jQuery版本）

    jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...

  5. i386和x86-64区别通俗易懂版本（转）

    x86架构首度出现在1978年推出的Intel 8086中央处理器,它是从Intel 8008处理器中发展而来的,而8008则是发展自Intel 4004的.Intel之后又推出了包括80186.80 ...

  6. css,区别pc端ipad端的样式

    摘自: http://blog.csdn.net/pm_mybook/article/details/54602107 /* 横屏 */ @media all and (orientation:lan ...

  7. css中import与link用法区别

    方式:引入CSS的方法有两种,一种是@import,一种是link @import url('地址');//注意,这种方式可以放在页面也可以放在css文件中<link href="地址 ...

  8. 第 13 章 CSS 选择器[上]

    学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的 ...

  9. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

随机推荐

  1. 个人作业2——英语学习APP案例分析

    一.个人体验 1.下载并使用,描述最简单直观的个人第一次上手体验. ①入眼界面华丽,有正能量的名言警句配上很有意境的图片,界面美观. ②内容丰富,有许多精选英文文章,同时配有中文翻译,便于理解. ③能 ...

  2. Node.js编程之异步

    异步操作 Node采用V8引擎处理JavaScript脚本,最大特点就是单线程运行,一次只能运行一个任务.这导致Node大量采用异步操作(asynchronous opertion),即任务不是马上执 ...

  3. 机器学习:形如抛物线的散点图在python和R中的非线性回归拟合方法

    对于样本数据的散点图形如函数y=ax2+bx+c的图像的数据, 在python中的拟合过程为: ##最小二乘法 import numpy as np import scipy as sp import ...

  4. windows下安装zabbix_agent

    Server端在linux系统上,server端版本为2.2.6,是以前就装好的已经跑了很久的稳定版.目前的需求是要将新业务的服务器添加到该监控队列.而这些服务器是windows系统. 第一次下载了最 ...

  5. 设计模式(一)—单例模式

    一.概述 1.单例模式的优点      由于单例模式只生成一个实例,减少了系统性能的开销,当一个对象的产生需要比较多的资源时,如读取配置,产生其他依赖对象时,则可以通过在应用启动时直接产生一个单例对象 ...

  6. 职责链模式（Chain of Responsibility）的Java实现

    职责链模式(Chain of Responsibility):使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它 ...

  7. ServerSuperIO 3.5版本的体系结构，以及未来规划的几点思考

    一.特点 1.轻型高性能通信框架,适用于多种应用场,轮询模式.自控模式.并发模式和单例模式. 2.不仅是通讯框架,是设备驱动.IO通道.控制模式场景的协调机制. 3.支持协议驱动器,可以按规范写标准协 ...

  8. CSS选择器渲染效率

    1 浏览器如何识别你的选择器 首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应的样式附于对应的HTML元素,达到美化页面的效果.Chris Coyier曾在<Efficiently ...

  9. div模拟输入框input/textarea

    //html<!--填写信息--> <div class="info-wrap"> <form class="formToCheck&quo ...

  10. PHP命名空间理解

    这玩意就是路径! 这玩意就是路径! 这玩意就是路径! 这玩意就是路径! 这玩意就是路径! use 就是声明要用某个路径的文件(类) 再有namespace的情况下,就类似于已经在一个路径里了 这个时候 ...