您现在的位置是:网站首页> 编程资料编程资料
使用条件注释判断 IE 浏览器版本适用于IE5.0及以上版本面向XHTML的IE条件注释IE的有条件注释优点和缺点css 条件注释区分非IE浏览器 针对主流浏览器的CSS-HACK写法及IE常用条件注释 ie10 css hack 条件注释等兼容方式整理浏览器兼容之旅第一站:如何在页面中创建IE条件注释条件注释判断浏览器(ie系列)详谈IE条件注释
2021-09-06
754人已围观
简介 IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解,下面为大家介绍下使用条件注释判断 IE 浏览器版本,感兴趣的朋友可以参考下
IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解。比如普通的HTML注释是:
而只有IE可读的IE条件注释是:
“非IE条件注释”:
non-IE HTML Code
“非特定版本IE条件注释”(很少用到):
Code for browsers that match the if condition
简而言之,除了“Windows上的IE”之外的所有浏览器都会认为条件注释只是一段普通的HTML注释。你不能在CSS代码中使用条件注释。IE条件注释是很有用的对IE隐藏或者展现特定代码的方法,比起在CSS中用诡异的_/制造bug,利用IE条件注释来写CSS “hacks”是更合理的方法。通俗点,条件注释就是一些if判断,但这些判断不是在脚本里执行的,而是直接在html代码里执行的。
条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
条件注释使用的是HTML的注释结构,因此他们只能使用在HTML文件里,而不能在CSS文件中使用。
从语法上看这是相当合法的普通HTML注释。任何浏览器都会认为之间的部分是注释从而忽略它。但是IE也会看到其中[if IE]>,从而开始解释接下来的代码直到遇到
通过“比较操作符”可以更灵活地对IE版本进行控制,用法是在IE前面加上“比较操作符”。合法的操作符如下:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同
示例:
/ 如果IE版本大于5.5 /
/ 如果IE版本小于等于6 /
/ 如果浏览器不是IE /
虽然看上去当你第一次使用条件注释的时候会更费时,但当你以后调试你的CSS的时候,就会发现非常方便。用条件注释你只需要写一遍HTML注释,而用bug你需要为每一条规则都写上又长又丑的代码,而且还经常是为了改变其他的hacks而写的hacks。除此之外条件注释对于不支持它的任何浏览器而言都是合法的HTML注释。以下为条件注释与CSS hacks的一些区别:
Hacks是基于浏览器的bug,而这些bug最终可能会被修复。
条件注释是基于IE特定代码,这种识别机制任何时候都不会被移除。
每一个浏览器都能看见你的hacks,或许下一个版本或者一个新的浏览器会在你的hacks代码上出错。
只有IE才能看到条件注释,通过额外的“IE文件”来影响页面,其他浏览器根本就不会下载它。
Hacks不能确保对哪些浏览器生效而对哪些不,用的hacks越多,代码越混乱。
条件注释利用版本匹配使得作者可以容易地对特定版本写代码。
相关内容
- IE7中绝对定位元素之间的遮盖问题示例探讨
- CSS的border属性值具有可读性的书写顺序CSS2书写顺序包括位置属性、自身属性、文字系列CSS书写规范、顺序和命名规则Mozilla建议的css书写顺序CSS样式书写顺序和命名规范及注意事项
- 背景图片随屏幕大小变化问题的解决方法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- css中filter:alpha透明度使用小结兼容IE、火狐 Filtering Blocks JS+CSS实现的的购物产品列表filter:drop-shadow有方向的阴影使用说明CSS3 滤镜 webkit-filter详细介绍及使用方法css3背景图片透明叠加属性cross-fade简介及用法实例
- CSS中将Span标签设置为固定宽度的方法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- css样式冲突问题练习示例CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 完全纯css实现div自适应居中兼容IE7 Chrome FireFox设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- 纯css实现的下拉导航栏附html结构及css样式基于html和CSS3制作简单侧边导航栏基于html和CSS3制作酷炫的导航栏css3与html5实现响应式导航菜单(导航栏)效果分享CSS3的一个简单导航栏实现CSS教程高级应用 2个纯CSS面包屑导航栏实现代码html+css 实现简易导航栏功能
- 一个属性border-collapse解决Table的边框问题Dreamweaver中怎么让html网页中的table边框细线显示?CSS样式简单实现Table没有外边框只有内边框CSS控制Table内外边框、颜色、大小示例css让table不显示边框的代码在火狐和谷歌浏览器中无效HTML table表格边框的控制详细说明用CSS设置表格Table的细边框的比较好用的方法 用CSS样式描述表格Table边框网页表格边框的设置方法网页表格表框制作技巧Table显示你要显示的边框代码
- 通过CSS显示垂直文本以垂直方式显示文本元素CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题