`
wjlgryx
  • 浏览: 308669 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS浏览器判断的写法

阅读更多

[if lte IE 6]>
<LINK rel="stylesheet" type="text/css" href="images/StyleSheet.css" />
<![endif]-->
<!--[if IE 7]>
<LINK rel="stylesheet" type="text/css" href="images/css.css" />
<![endif]-->
#example{color:red ;}
* html #example{color:blue;}
*+html #example{color:green;}
<!–[if lte IE 6]>……<![endif]–>
Ite:less than or equal to意思是小于或等于IE6浏览器,用于IE浏览器的条件注释,常用于CSShack,针对IE的JS等。
在进行WEB标准网页的学习和应用过程中,网页对浏览器的兼容性是经常接触到的一个问题。其中因微软公司的Internet Explorer(简称IE)占据浏览器市场的大半江山,此外还有Firefox、Opera等。需要对这些浏览器进行兼容。
同时,单就IE而言,因IE版本的升级更替,目前浏览者使用的主要停留在 IE5(IE5.5)、IE6和IE7这三个版本中。而这3个版本对于我们制作的WEB标准网页(XHTML+CSS)解释执行的显示状况不尽相同。并且,其他非IE浏览器与IE对某些CSS解释也不一样。所以,通过IE浏览器中的专有条件注释可有针对性的进行相关属性的定义。
条件注释只能用于Explorer 5+ Windows(以下简称IE)(条件注释从IE5开始被支持)。如果你安装了多个IE,条件注释(Conditional comments)将会以最高版本的IE为标准(目前为IE 7)。
条件注释只能在windows Internet Explorer(以下简称IE)下使用,因此我们可以通过条件注释来为IE添加特别的指令。
通俗点,条件注释就是一些if判断,但这些判断不是在脚本里执行的,而是直接在html代码里执行的,比如:

<!–[if IE]>
这里是正常的html代码
<![endif]–>


1,条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2,IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3,条件注释使用的是HTML的注释结构,因此他们只能使用在HTML文件里,而不能在CSS文件中使用。
可使用如下代码检测当前IE浏览器的版本(注意:在非IE浏览器中是看不到效果的)
<!–[if IE]>
       <h1>您正在使用IE浏览器</h1>
       <!–[if IE 5]>
           <h2>版本 5</h2>
       <![endif]–>
       <!–[if IE 5.0]>
           <h2>版本 5.0</h2>
       <![endif]–>
       <!–[if IE 5.5]>
           <h2>版本 5.5</h2>
       <![endif]–>
       <!–[if IE 6]>
           <h2>版本 6</h2>
       <![endif]–>
       <!–[if IE 7]>
           <h2>版本 7</h2>
       <![endif]–>
<![endif]–>
那如果当前的浏览器是IE,但版本比IE5还低,该怎么办呢,可以使用<!–[if ls IE 5]>,当然,根据条件注释只能在IE5+的环境之下,所以<!–[if ls IE 5]>根本不会被执行。
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同


Conditional comments属于CSS hack? 条件判断属于CSS hack吗?
严格地说是属于CSS hack。因为就好象其他真正的css hack一样,它使得我们可以给一些浏览器赋予特殊的样式,再则它不依赖于某个浏览器的BUG来控制另外一个浏览器(的样式)。除此之外,条件判断还能用来做一些超出CSS HACK范围的事情(虽然这种情况很少发生)。
因为条件判断不依赖于某个浏览器的hack,而是一个经过深思熟虑的特色功能,所以我相信它是可以被放心地使用的。当然,其他浏览器也有可能支持条件判断(到目前为止还没有),但是看起来,他们应该不会使用如<!–[if IE]>这样的语法。
应该如何应用条件注释
本文一开始就说明了,因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样,具体就是对CSS的解释不同,我们为了兼容这些,可运用条件注释来各自定义,最终达到兼容的目的。比如:
<!– 默认先调用css.css样式表 –>
<link rel="stylesheet" type="text/css" href="css.css" />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]–>

这其中就区分了IE7和IE6向下的浏览器对CSS的执行,达到兼容的目的。同时,首行默认的css.css还能与其他非IE浏览器实现兼容。
注意:默认的CSS样式应该位于HTML文档的首行,进行条件注释判断的所有内容必须位于该默认样式之后。
比如如下代码,在IE浏览器下执行显示为红色,而在非IE浏览器下显示为黑色。如果把条件注释判断放在首行,则不能实现。该例题很能说明网页对IE浏览器和非IE浏览器间的兼容性问题解决。
<style type="text/css">
body{
background-color: #000;
}
</style>
<!–[if IE]>
<style type="text/css">
body{
background-color: #F00;
}
</style>
<![endif]–>
同时,有人会试图使用<!–[if !IE]>来定义非IE浏览器下的状况,但注意:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下非单不是执行该条件下的定义,而是当做注释视而不见。
正常就是默认的样式,对IE浏览器需要特殊处理的,才进行条件注释。
在HTML文件里,而不能在CSS文件中使用。

分享到:
评论

相关推荐

    css日常公用样式与BUG解决方案

    - 使用`feature detection`(特性检测)来判断浏览器是否支持特定CSS特性。 9. **图片处理** - `object-fit`: 控制图片在容器中的填充方式,如`cover`、`contain`等。 - `image-set`: 针对不同设备分辨率提供...

    用于跨浏览器网页编程

    2. **利用前缀**:对于某些新的CSS属性或JavaScript API,不同浏览器可能支持情况不同,可以通过添加特定前缀(如`-webkit-`)来兼容不同浏览器。 3. **使用Polyfills**:Polyfills是一些脚本库,可以在不支持某些新...

    CSS 忍者.doc

    CSS Hacks是一种专门针对特定浏览器或其版本的CSS写法,用以修正某些特性的实现差异。常见的CSS Hacks有: 1. `_selector{property:value;}`:仅对IE6生效。 2. `*selector{property:value;}`:对IE6和IE7有效。 3....

    css hack大全

    #### 三、CSS 判断 IE 版本 除了上述针对特定浏览器的 Hack,还需要能够根据不同的 IE 版本来应用不同的样式。这主要通过条件注释(Conditional Comments)来实现。 ##### 1. 条件注释 Hack 条件注释是 HTML 中的一...

    CSS加载失败原因的总结与分析

    2、if造成失败 有的CSS制作时候可能用了使用if判断语句对什么浏览器调用什么CSS文件或CSS代码,而疏忽造成if调用的混乱,造成在某些浏览器上显示正常,有的浏览器不能显示CSS控制布局,解决方法好好检查自己造成CSS...

    IE、FF的JS兼容写法

    在JavaScript编程中,IE(Internet Explorer)和FF...通过使用如上的兼容性写法,可以确保代码在不同的浏览器环境下都能正常工作。在实际项目中,还可以利用库如jQuery或Modernizr来进一步简化跨浏览器的兼容性问题。

    CSS检测高像素密度屏幕设备的样式

    这段代码是使用了带前缀的-webkit浏览器兼容写法,它可以匹配到iOS设备(如iPhone 4S)上的高像素密度屏幕。在满足条件的设备上,这段CSS将使得网页的背景色变为红色。这只是一个简单例子,实际上在实际开发中,...

    兼容IE6的网页最小最大宽度和最小最大高度css写法

    使用上述方法,我们能够确保即使在不支持CSS3的IE6浏览器中,网页元素也能够按照设计者的意图正常显示,同时对现代浏览器也保持兼容。 请注意,尽管上述方法可以解决IE6中的特定问题,但鉴于IE6已经停止维护,使用...

    说说CSS Hack 和向后兼容(推荐)

    最后,文中还提到了一种经济实惠型的写法,这种写法注重单独的HACK,特别针对IE浏览器使用属性HACK,而对于其他浏览器较少的HACK则选择块状的选择器HACK。这种方法符合上面提到的三个原则,既省力易记,又便于维护...

    网页设计与制作(HTML+CSS+JS)-3期(KC003) 网页设计与制作html5+css3+JavaScript第九章--

    9-10题涉及`rotateY(30deg)`的效果,该效果会使得元素沿Y轴旋转,但题目没有给出图形选项,无法直接判断。 `rotate3d`在9-11题中表示沿着特定轴旋转,`rotate3d(0,1,0,45deg)`表示沿着Y轴顺时针旋转45度,因此B选项...

    IE8 CSS hack

    例如,“color:blue\9”这样的写法在IE8中能够被识别,而在其他浏览器中被忽略。 - 使用“*”和“_”的CSS hack:这种方式利用IE6和IE7对星号“*”和下划线“_”的特殊解析来创建差异。由于IE8不再识别这两种符号的...

    HTML第二部分作业(含答案).docx编程资料

    兼容所有的浏览器**:虽然CSS标准由W3C组织制定,但不同的浏览器对CSS的支持程度存在差异,因此CSS并不能保证在所有浏览器上完全一致地显示。 ### 2、用于嵌入一个网页内容的标记符 **答案:B.** - **A.**:此...

    js获取某元素的class里面的css属性值代码

    if (attr === "backgroundPosition") { // IE6~8 不兼容 backgroundPosition 写法,识别 backgroundPositionX/Y if (ie) { return obj.currentStyle.backgroundPositionX + " " + obj.currentStyle....

    base64图片在各种浏览器的兼容性处理

    可以利用JavaScript中的`UserAgent`对象和`WindowsNT`版本号来判断IE8浏览器的具体情况,并根据情况应用不同的处理方法。 具体的JavaScript检测代码大致如下: ```javascript if (navigator.userAgent.indexOf('...

    刮刮卡功能实现 taro写法

    2. 配置状态:在组件内部,管理两个关键状态:`isScratched`用于判断是否已经刮开,`scratchArea`用于存储用户刮开的区域。 3. 处理交互:添加事件监听,如触摸开始、移动和结束事件,计算用户手指移动的轨迹,并...

    jQuery(1.6.3) 中css方法对浮动的实现缺陷分析

    jQuery的出现,旨在简化这样的操作,通过其`css`方法,理论上可以统一这两种写法,只需使用`float`属性即可。 jQuery的`css`方法允许开发者这样使用: ```javascript $('#d1').css('float', 'right'); var str = $...

    IE8 的兼容性问题总结

    开发者可能需要使用条件注释(Conditional Comments)引入专门为IE8编写的CSS样式表,或者使用像Modernizr这样的库来检测浏览器的能力并添加相应的样式。 JavaScript方面,IE8的JScript引擎不支持ES5的新特性,如数...

    Sass 中文离线文档

    ,并且支持大多数CSS的写法,包括浏览器前缀和IE滤镜写法。文件扩展名通常为.scss。 2. 缩进格式(Indented Sass),通常简称为"Sass":这是一种更为简化的语法格式,它使用缩进而不是花括号来表示属性属于某个选择...

    IE、FF浏览器下修改标签透明度

    实现浏览器兼容的透明效果,关键在于了解各浏览器对CSS特性的支持情况,并结合JavaScript进行条件判断和处理。`opacity`和`filter`的组合使用可以解决大部分浏览器的透明度兼容问题,但在编写代码时也需要注意性能...

Global site tag (gtag.js) - Google Analytics