作为一个web开发员,特别是前台设计师在做WEB开发的时候经常会遇到一些浏览器不兼容的情况,这也是许多开发者头痛的问题,因为这不是开发者技术的问题,而是浏览器不统一而导致。那些写前台代码的程序员无一不希望只有一种浏览器该多好!可是这个愿望不容易实现。
小新在这里总结了一些通过css代码来判断浏览器的类型,从而针对不同的浏览器写出不同的css代码来解决浏览器兼容的问题,希望对大家有所帮助:
一、通过CSS代码直接判断(就是在css代码里面进行判断)

<style type="text/css">   
.top{color:red ;}/*firefox*/    
* html #example{color:blue;}/*ie6*/    
*+ html #example{color:green;}/*ie7*/    
</style>   
</head>   
<body>   
<div class="top">在FireFox下显示为红色,在IE6.0下显示为蓝色,在IE7.0下显示为绿色。</div>   
</body>

二、通过CSS条件注释的方法判断(条件注释就是用if语句来判断浏览器的型号)

<style> 
.top{color:#ff6600}/*--火狐显示为橙色*/ 
</style> 
<!--[if IE 6]> 
<style> 
.top{color:#0000ff}/*--IE6显示为蓝色*/ 
</style> 
<![endif]-->

<!--[if IE 7]>  
<style> 
.top{color:#ff0000}/*--IE7显示为红色*/ 
</style> 
<![endif]-->

<!--[if IE 8]>  
<style> 
.top{color:#6633cc}/*--IE8显示为紫色*/ 
</style> 
<![endif]--> 
<body>  
<div class="top">在FireFox下显示为橙色,在IE6.0下显示为蓝色,在IE7.0下显示为红色,IE8显示为紫色</div>  
</body>

三、针对IE浏览器,条件注释语句还有一些减少逻辑判断的参数:

lte:Less than or equal to的简写(就是小于或等于的意思)。

lt :Less than的简写(就是小于的意思)。

gte:Greater than or equal to的简写(就是大于或等于的意思)。

gt :Greater than的简写(也就是大于的意思)。

例如:<!--[if gt IE 5.5]> / 如果IE版本大于5.5 /

<!–[if lte IE 6]> / 如果IE版本小于等于6 /

<!–[if !IE]> / 如果浏览器不是IE /

本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/925202,如需转载请自行联系原作者

通过CSS代码判断浏览器方法大全相关推荐

  1. css样式压缩了怎么还原,CSS代码的压缩方法

    原标题:CSS代码的压缩方法 在建站的时候,很多网站都对他们的代码进行压缩,今天主要来讲解下CSS代码的压缩,压缩后的CSS代码所占用字节数会减少,要是访问量比较小的网站看不出明显的区别,比较大型的网 ...

  2. js判断PC端或是移动端、判断是不是微信浏览器、js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本

    ** js判断PC端或是移动端 ** 第一种 window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator ...

  3. java判断浏览器杂项_java简单代码判断浏览器代码

    java简单代码判断浏览器代码 import java.util.regex.Matcher; import java.util.regex.Pattern; public class BrowseT ...

  4. js判断浏览器信息大全

    js判断浏览器信息大全,详情如下. 可以直接引入js文件. /** 描述:判断浏览器信息* 编写:LittleQiang_w* 日期:2016.1.5* 版本:V1.1*///判断当前浏览类型 fun ...

  5. 根据屏幕分辨率获取css,根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码...

    既判断分辨率,也判断浏览器 重新完善代码,使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码. 解释: var IE1024=""; var IE800="&quo ...

  6. 浏览器自定义css代码,根据浏览器不同设置CSS

    [实例名称] 根据浏览器不同设置CSS [实例描述] 不同的浏览器在同样的CSS下显示效果可能不同,有时候为了保证界面的一致性,需要根据浏览器的不同设置相应的CSS. [实例代码] 标题页-学无忧(w ...

  7. php判断是否safari,js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本_javascript技巧...

    因为ie10-ie11的版本问题,不再支持document.all判断,所以ie判断函数要重新写了 function isIE() { //ie? if (!!window.ActiveXObject ...

  8. java判断safari_js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本

    因为ie10-ie11的版本问题,不再支持document.all判断,所以ie判断函数要重新写了 function isIE() { //ie? if (!!window.ActiveXObject ...

  9. js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本

    因为ie10-ie11的版本问题,不再支持document.all判断,所以ie判断函数要重新写了 function isIE() { //ie? if(!!window.ActiveXObject ...

最新文章

  1. Java XML解析工具 dom4j介绍及使用实例
  2. mybatis映射器${}和#{}的区别
  3. 定义一个包含增强方法的javaBean(最终增强)
  4. zabbix mon监控mysql_MON-DB-mysql通过zabbix监控processlist数量
  5. 命令及串口命令_嵌入式Linux系列第7篇:使用串口
  6. 两年不工作、月花200块,90后躺平学大师已有了一批「信徒」
  7. fatal error C1010
  8. 大学四年,这个Java自习路线,让我现在进了阿里
  9. 网页自动加拼音html,HTML5给汉字加拼音收起展开组件的实现代码
  10. 检验入参合法性有哪些_参数检验和非参数检验是什么意思
  11. 笔记本计算机拆开视频,神州笔记本拆卸全过程图解
  12. [Azure - SLA] 在微软云中的服务级别协议SLA
  13. 华为云教程(虚拟私有云VPC)
  14. pycharm电脑上怎么下载-Pycharm下载和安装图文教程[超详细]
  15. dota迷你盒子Android5,DotA2超级盒子app
  16. http 307重定向
  17. 化学绘图软件ChemDraw真的什么都能干!
  18. 【Java面试】Java 内存溢出 栈溢出的原因与排查方法
  19. 详解IC卡、ID卡、M1卡、射频卡四种智能卡的区别
  20. 颜色用于检测:肤色检测

热门文章

  1. 工作杂谈001-供应商对接
  2. CDN内容分发网络(上)
  3. html透明表单登录注册页面源码
  4. MQTT树莓派小车局域网控制移动
  5. 基于ESP32的蓝牙刷屏器自动点击器的制作
  6. 老司机教你怎样下载电影
  7. 初中信息技术说课稿_小学信息课说课稿范文(精选6篇)
  8. PHP/Golang实现—数据结构之顺序栈
  9. matlab输出曲线颜色设置,matlab曲线颜色样式设置
  10. 字节题--雀魂启动!