为IE单独写CSS的三种方法

时间：2021-07-04 03:56:04

本文由 Kayo Lee 发表，本文链接：http://kayosite.com/the-methods-make-css-only-for-ie.html

因为万恶的 IE 存在各种的不标准，因此，在进行页面开发时不免要为 IE 单独写一些 CSS 。熟悉的方法有 IE hacks 和条件注释 CSS（Conditional Stylesheets），下面，不妨讨论一下这两种方法的优缺点。

IE hacks

举个例子，一个元素在其他浏览中的左边距是 30px ，而在 IE6 中则设置为 20px ，可以如下编写：

1
.demo {margin-left: 30px; _margin-left: 20px; }

对我个人而言，喜欢条件注释 CSS 是胜于 IE hacks ，光是 IE hacks 里面带有“hacks”这个单词已经让人很不舒服，总觉得这是偏方，而且是很偏的解决方案。但是，IE hacks 也有它的优点——

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

当然，它的缺点也很明显——

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

条件注释 CSS

同样是上面的例子，如果使用条件注释 CSS ，可以如下编写：

HTML

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

ie6.css

1
.demo {margin-left: 20px; }

这里说明一下：条件注释是一种 IE 专有的、对常规（X）HTML 注释的 Miscrosoft 扩展。从 W3C 标准来说，它也是不标准的产物，但它是微软官方推出的针对 IE 进行开发的方式，并且条件注释对于其他所有浏览器作为常规注释出现，因此对其他浏览器无害。

条件注释 CSS 的好处是在独立的 CSS 文件中编写，能准确控制在特定的 IE 中加载，不会造成资源浪费，并且便于维护。缺点就是会产生多余的 HTTP 请求，尤其是当你需要兼容的 IE 版本很多的时候，你就需要产生多个 HTTP 请求，这对于本来通道数目就少的低版本 IE 来说无疑会影响页面加载速度。

条件注释只能在IE5+的环境之下。

默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。

并且<!--与 -->的内容和注释标记之间不能有任何的空格，否则会出错，无法正确的读取IE的CSS文件。

显然，以上两种方法都不是很好的方法，因此，接下来介绍一种相对来说更好的解决方案。

条件注释 html 标签

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

1
2
3
4
5
6
<!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 文件里即可。例如上面的例子则可以在 CSS 文件里编写：

1
.ie6 .demo {margin-left: 20px; }

这种方法吸收了条件注释表达式的好处同时又不会产生多余的 HTTP 请求，只是由于这些针对特定 IE 的 CSS 与普通的 CSS 放在一起，即不是相应的 IE 也会被加载，因此如果 CSS 数目比较多的话就会像使用 hacks 那样，造成浪费，开发者需要根据具体情况选择方法。

为IE单独写CSS的三种方法的更多相关文章

  1. HTML5结合CSS的三种方法&plus;结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  2. JAVA写JSON的三种方法，java对象转json数据

    JAVA写JSON的三种方法,java对象转json数据 转自:http://www.xdx97.com/#/single?bid=5afe2ff9-8cd1-67cf-e7bc-437b74c07a ...

  3. Node&period;js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

  4. python面对对象编程------3：写集合类的三种方法

    写一个集合类的三种方法:wrap,extend,invent 一:包装一个集合类 class Deck: def __init__( self ): self._cards = [card6(r+1, ...

  5. CSS-01-引入css的三种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 写Action的三种方法

    Action类似于servlet,在用户对浏览器输入url访问的时候充当控制器的角色.它在访问时产生,执行execute()之后就销毁了. 写Action是代理事务,它实现的三种方式是: (1)POJ ...

  7. HTML链接&sol;实施CSS的三种方法

    ①页面内部链接:     <head>       <style type="text/css">       /*Cascading Style Shee ...

  8. 【css】——三种方法实现多列等高

    html: <section> <div class="item"> Lorem, ipsum dolor sit <div class=" ...

  9. html&lpar;常用标签&comma;标签分类&rpar;，页面模板， CSS&lpar;css的三种引入方式&rpar;，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

随机推荐

  1. xamarin DependencyService源码阅读

    xamarin在面对PCL无法实现的各平台特有功能时使用了一种叫[DependencyService]的方式来实现.它使得xamarin能像原生平台一样做平台能做到的事情!主要分四个部分 接口:定义功 ...

  2. 初识AngularJS 之 HelloWorld和数据绑定

    1.Hello World 我用的开发工具是   atom   ,大家有需要的话可以找我要安装包嘻嘻 第一步: 写入以下代码: <!DOCTYPE html> <html ng-ap ...

  3. 1012&period; The Best Rank &lpar;25&rpar;

    To evaluate the performance of our first year CS majored students, we consider their grades of three ...

  4. java基础知识复习

    String  http://blog.csdn.net/uyu2yiyi/article/details/6275808 1. 首先String不属于8种基本数据类型,String是一个对象. 因为 ...

  5. XSHELL配色方案及导入配色方案的方法

    [ubuntu] text(bold)=ffffff magenta(bold)=ad7fa8 text=ffffff white(bold)=eeeeec green=4e9a06 red(bold ...

  6. UVA 10294 等价类计数

    题目大意: 项链和手镯都是若干珠子穿成的环形首饰,手镯可以旋转和翻转,但项链只能旋转,给n个珠子,t种颜色,求最后能形成的手镯,项链的数量 这里根据等价类计数的polya定理求解 对于一个置换f,若一 ...

  7. Storm因机器断电等，启动supervisor异常

    Storm因机器断电等,启动supervisor错误 因机器断电或其他异常导致的supervisor意外终止,再次启动时报错: 2014-08-13 10:36:03 b.s.event [ERROR ...

  8. x264&lowbar;param&lowbar;t结构

    typedef struct x264_param_t { unsigned int cpu; // CPU 标志位 int i_threads; // 并行编码多帧; 线程数,为0则自动多线程编码 ...

  9. C功底挑战Java菜鸟入门概念干货（一）

    一.认识Java 1.Java 程序比较特殊,它必须先经过编译,然后再利用解释的方式来运行.  2.Byte-codes 最大的好处是——可越平台运行,可让“一次编写,处处运行”成为可能.  3.使用 ...

  10. 【ural1297】 Palindrome

    http://acm.timus.ru/problem.aspx?space=1&num=1297 (题目链接) 题意 求最长回文子串 Solution 后缀数组论文题 穷举每一位,然后计算以 ...

相关文章