IE浏览器单独写CSS样式的几种方法

所属分类: 网页制作 / CSS 阅读数: 1347
收藏 0 赞 0 分享

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

IE hacks

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

复制代码
代码如下:

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

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

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


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

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

条件注释 CSS

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

HTML:

复制代码
代码如下:

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

ie6.css


复制代码
代码如下:

.demo {margin-left: 20px; }

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

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

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

条件注释 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 文件里即可。例如上面的例子则可以在 CSS 文件里编写:


复制代码
代码如下:

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

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

更多精彩内容其他人还在看

2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
收藏 0 赞 0 分享

前端设计师需要了解的9个问题

这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项,非常的实用,是篇非常不错的文章,这里推荐给大家
收藏 0 赞 0 分享

CSS强制性换行的方法区别详解

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
收藏 0 赞 0 分享

CSS语义化命名方式及常用命名规则

本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处,敬请指出,欢迎你提出更好的建议,加插更多的命名规范。
收藏 0 赞 0 分享

ul li内容宽度的问题的解决方案

在IE6下只要我设置LI的宽度为auto,不论LI里面的内容多长,LI的宽度始终是100%,即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们,在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢?像FF那样。
收藏 0 赞 0 分享

html5+css3气泡组件的实现

本文是html5+css3系列教程的第一篇,给大家讲述html5+css3实现气泡组件,讲解的十分的详细,这里推荐给大家,希望对大家能有所帮助
收藏 0 赞 0 分享

html5+css3之CSS中的布局与Header的实现

本文从CSS3的布局(CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介)Header布局的实现(float实现布局、Header js的实现)向我们展示了HTML5与CSS3的魅力。
收藏 0 赞 0 分享

一款恶搞头像特效的制作过程 利用css3和jquery

今天给大家介绍一款恶搞头像特效的制作过程,你可以把任意一张照片放到跳舞的漫画中,为他带上不同的帽子,让他翩翩起舞,下面我们一起来看一下制作过程和效果
收藏 0 赞 0 分享

大图片根据分辨率自适应宽度仍居中显示

一个1920*900的大图,在1024*768的分辨率下仍居中显示,如何做到这一点,下面是一个可行的解决方案
收藏 0 赞 0 分享

CSS3提交意见输入框样式代码

这个提交意见输入框,结构使用到了table,样式用的css3,包含了多方面的知识,比较适合新手朋友们
收藏 0 赞 0 分享
查看更多