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


Posted in HTML / CSS onOctober 14, 2014

因为万恶的 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 那样,造成浪费,开发者需要根据具体情况选择方法。
HTML / CSS 相关文章推荐
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 #HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 #HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 #HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 #HTML / CSS
css3 transform属性详解
Sep 30 #HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 #HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 #HTML / CSS
You might like
php基础知识:函数基础知识
2006/12/13 PHP
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
Python中的列表知识点汇总
2015/04/14 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python实现打印实心和空心菱形
2019/11/23 Python
python 实现单通道转3通道
2019/12/03 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Python绘制组合图的示例
2020/09/18 Python
python 爬虫请求模块requests详解
2020/12/04 Python
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
PYTHON InceptionV3模型的复现详解
2022/05/06 Python