css HACK之浏览器版本判断【转】

<!--[if lte IE 6]>

<![endif]-->

IE6及其以下版本可见

<!--[if lte IE 7]>

<![endif]-->

IE7及其以下版本可见

<!--[if IE 6]>

<![endif]-->

只有IE6版本可见

<![if !IE]>

<![endif]>

除了IE以外的版本

<!--[if lt IE 8]>

<![endif]-->

IE8以下的版本可见

<!--[if gte IE 7]>

<![endif]-->

IE7及大于IE7的版本可见

用法:

(1)

可使用如下代码检测当前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里的不等于判断符相同

(2)

应该如何应用条件注释
    本文一开始就说明了,因为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{

}
</style>
<!-–[if IE]>

<style type="text/css">
body{

}
</style>
<![endif]–->

同时,有人会试图使用<!–-[if !IE]>来定义非IE浏览器下的状况,但注意:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下非单不是执行该条件下的定义,而是当做注释视而不见。

正常就是默认的样式,对IE浏览器需要特殊处理的,才进行条件注释。在HTML文件里,而不能在CSS文件中使用。

时间: 2024-09-30 11:55:18

css HACK之浏览器版本判断【转】的相关文章

[JavaCore] 微信手机浏览器版本判断

公司要做微支付,微信浏览器版本要大于5 package com.garinzhang.web.weixin; import org.apache.commons.lang.StringUtils; import org.apache.commons.lang.math.NumberUtils; /** *类说明 *@author Garin Zhang */ public class WchatUtil { public static final String WEI_XIN_BROWSER =

[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器

截至自2017-08-11,支持现世已出的几乎所有PC端浏览器版本判断. 受支持的PC端浏览器列表: Edge IE Chrome Firefox Opera Safari QQ浏览器 360系列浏览器 使用IE内核的非主流浏览器 使用Chrome内核的非主流浏览器 使用混合内核的非主流浏览器 获取浏览器版本方法: function getBroswer(){ var sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s

CSS Hack (各个浏览器兼容的问题)

写css样式的时候,恐怕最头疼的就是各个浏览器下的兼容性问题,即css hack,明明感觉应该是对的,但是就是出不来效果,我根据平时所接触的,总结一下关于兼容 性的技巧,希望可以对大家有所帮助…… CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针

浅谈CSS hack(浏览器兼容)

今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu.com/data/browser).令我感到欣慰的是chrome排第一,chrome一直以来对W3C标准都支持得比较友好,但是图中也反映了使用IE系列的人数也不少,所以我们日常做前端开发的时候还要考虑他们的感受. 以下是正文: 我的前任公司做前端的时候,要求兼容IE8及以上,谷歌,火狐三座大山.因为

浏览器版本判断

页面引入: <script src="${ctx}/static/jquery/jquery-1.10.2.min.js"></script>    <script src="${ctx}/static/jquery/jquery.browser.js"></script 页面1:一般都在登入页面. $(document).ready(function(){    var bro=$.browser;    if(bro.m

CSS hack 和 IE浏览器条件判断 集中汇总

(从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-16) 未完待续 css hack ie 浏览器判断语句 360大多数网页的各浏览器兼容方法: <!DOCTYPE html> <!--[if lt IE 7 ]><html class="ie6"><![endif]--> <!--[if IE 7 ]><html class="ie7"><![endif]--&

jquery判断浏览器版本插件,jquery-browser.js

一.jquery判断浏览器版本插件,jquery-browser.js jquery 1.9 之后已经删除判断浏览器版本的方法: $.browser.msie $.browser.version 原因是: 注意:通过user agent字符串来检测浏览器不是一个好主意,在1.9中将完全移除该方法,不过你可以使用jQuery Migrate(迁移)插件.或者你可以试试Modernizr. 但如果想用怎么办呢? 二.解决方法: 复制下面的代码,保存为jquery-browser.js,在jquery

关于CSS Hack

由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,导致生成的不是我们所需要的页面效果. 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,在不同的浏览器中也能得到我们想要的页面效果. 简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器.当然,我们也可以反过来利用CSS hack为不同版本的浏览

CSS hack!css黑客攻击

简介 这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack! 2原理 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对. 类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * &q