浏览器兼容--条件样式,选择符前缀,样式属性前缀

2012-12-05 09:20 by greenal, 1570 阅读, 0 评论, 收藏, 编辑

原文地址-- http://www.w3cplus.com/create-an-ie-only-stylesheet

然后经过改良,就有下面的总结。

1 调用条件样式的方法

只有IE 生效
<!--[if IE]><![endif]-->
在具体使用条件注释语句之前,有几种条件注释属性含义我们必须要理解:
  1. gt(greate than):选择条件版本以上版本,不包含条件版本本身;
  2. lt(less than):这个刚好与gt相反,表示的是选择条件版本以下的版本,不包含条件版本自身;
  3. gte(greate than or equal):选择条件版本以上版本,并包含条件版本自身;
  4. lte(less than or equal):选择条件版本以下的版本,并包含条件版本自身;
  5. !:选择条件版本以外所有版本,无论高低。
gt:>
lt:<
gte:>=
lte:<=
1、支持所有IE浏览器
<!--[if IE]>
<link rel="stylesheet" href="test.css"  type="text/css"/>
<![endif]-->
 
2、支持除IE外的所有浏览器
<!--[if !IE]>
<link rel="stylesheet" href="test.css"  type="text/css"/>
<![endif]-->
 
3、仅仅支持IE10
<!--[if IE 10]>
<link rel="stylesheet" type="text/css" href="ie10.css">
<![endif]-->
 
4、支持IE9 以下版本
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="ie9-and-down.css"><![endif]-->
 
 
二、选择符前缀法
<style>.test{ width:90px;}               /*IE 6,IE 7,IE 8*/*html .test{ width:80px;}         /*only for IE 6*/*+html .test{ width:70px;}        /*only for IE 7*/</style>
 
 
三、样式属性前缀法
<style>

.team{ width:90px; *width:70px; _width:80px;}      /*_ IE 6     * IE 6 和 IE 7*/
</style>

转载于:https://www.cnblogs.com/lianghong/p/8011389.html

浏览器兼容--条件样式,选择符前缀,样式属性前缀相关推荐

  1. 浏览器兼容--条件样式,选择符前缀,样式属性前缀(转)

    浏览器兼容--条件样式,选择符前缀,样式属性前缀 2012-12-05 09:20 by greenal, 1570 阅读, 0 评论, 收藏, 编辑 原文地址-- http://www.w3cplu ...

  2. 为ie和chrome FF单独设置样式的“条件注释法”、“类内属性前缀法”、“选择器前缀法”、实现方法 案例(推荐)

    这三种分类hack css详细原理,参考:http://blog.csdn.net/goodshot/article/details/44309055 1.为ie和chrome单独设置样式的类实现案例 ...

  3. 浏览器兼容与图片整合

    浏览器兼容与图片整合 一.浏览器兼容 为什么会出现浏览器兼容问题? 由于各大主流浏览器由不同的厂家开发,所用的核心也不同,架构代及码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床.再加上 ...

  4. CSS浏览器兼容总结篇

    CSS浏览器兼容总结篇 前言:本篇文章的大部分知识点来自于清华大学出版社的<DIV+CSS网页样式与布局实战详解>,我在书本内容的基础上添加了自己所了解的一些知识,有兴趣的伙伴可以去买正版 ...

  5. html:(29):伪选择符和分组选择符

    伪类选择符 更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色: a:hover{co ...

  6. CSS快速学习9:浏览器兼容

    五大浏览器内核 •Trident   (MSHTML)     (三叉戟:三叉线:三齿鱼叉) •Gecko      (壁虎) •Presto      ( 迅速的) •Webkit    (Safa ...

  7. web前端——浏览器兼容问题

    [1]为什么会出现浏览器兼容问题 在各大浏览器厂商的发展过程中,它们对web的标准各有不同的实现,标准不同存在差异所以产生兼容性的问题. [2]浏览器内核以及代表作品 IE浏览器内核:Trident内 ...

  8. 处理浏览器兼容所遇到的问题总结(一)

    注意:因为浏览器问题,重新定义Array.prototype.indexOf-等函数时,一定要注意符合原始定义,不要随便用别的实现方式定义,否则可能会影响插件调用 之前开发项目时,前端调试都是以goo ...

  9. CSS快速学习2:选择符权重和字体类属性

    选择符的权重: CSS中用四位数字表示权重. 类型选择符的权重为0001 class选择符的权重为0010 id选择符的权重为0100 子选择符的权重为0000 属性选择符的权重为0010 伪类选择符 ...

最新文章

  1. HTML5仿微信聊天界面、微信朋友圈实例
  2. linux 文件搜索 grep locate find
  3. 【错误记录】Visual Studio 中配置 NDK 头文件路径
  4. 【Java 并发编程】指令重排序规范 ( happens-before 先行发生原则 )
  5. oracle 提示i386,新手请教:RAC安装时检测i386软件包未安装,这个怎么处理?
  6. Spring Cloud 系列之 Nacos 配置中心
  7. 1018.eclipse工具使用记录
  8. Sister Sharp
  9. 解决struts2标签在HTML中错位的问题
  10. Caffe傻瓜系列(7):solver优化方法
  11. python中printf的用法_python输出语句print的用法是什么?
  12. IV值和WOE值的理解
  13. 邪少微信自定义分享卡片链接的解决方案(可自定义分享标题 自定义分享链接 分享描述 分享缩略图)
  14. 手机英文上面的逗号怎么打_英文中关于逗号使用方法
  15. 计算机博弈围棋,计算机博弈:“不围棋”入门教程
  16. [Beta]第四次 Scrum Meeting
  17. 【Markdown语法】5分钟快速入门保姆级教程(建议收藏...)
  18. Linux vmstat 命令详解
  19. 小程序springboot食堂预约订餐系统毕业设计-附源码221554
  20. OpenWrt各大软件源地址

热门文章

  1. 东软java的笔试_东软的笔试题
  2. matlab中的rem和mod,matlab的rem()和mod()函数
  3. RHCSA7-NOTE(红帽管理员-题库详细笔记)
  4. 系统镜像_如何通过云服务器创建Windows系统镜像
  5. oracle nodemanage,Linux 下Weblogic集群搭建-04通过nodemanage进行节点的启动与关闭
  6. mysql增加布尔字段_如何将布尔字段添加到MySQL?
  7. php json对象取数据类型,PHP如何科学地json_encode类对象数据
  8. wordpress上传主题错误解决方法
  9. opencv颜色识别java,Opencv颜色识别与追踪
  10. mysql hourminute_mysql日期函数(时间函数)