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实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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下实现折线图效果的代码
2007/04/28 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
Python中matplotlib中文乱码解决办法
2017/05/12 Python
Python 装饰器使用详解
2017/07/29 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
浅谈Python中的模块
2020/06/10 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
摄影实习自我鉴定
2013/09/20 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
一行Python命令实现批量加水印
2022/04/07 Python
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript