通过CSS代码判断浏览器方法大全

简介:

作为一个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,如需转载请自行联系原作者



相关文章
|
22天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
41 4
|
1月前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
1月前
|
前端开发
CSS画三角形(三种方法)
CSS画三角形(三种方法)
|
1月前
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
35 1
|
9天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
11 0
|
10天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
16 0
|
13天前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
35 7
|
13天前
|
Web App开发 前端开发 开发者
css检查方法
【4月更文挑战第13天】css检查方法
14 2
|
13天前
|
XML 前端开发 开发者
css的常用方法
【4月更文挑战第13天】css的常用方法
13 3
|
19天前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
19 0

热门文章

最新文章