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



相关文章
|
前端开发
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),保存资源(图片、脚本、CSS)
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),保存资源(图片、脚本、CSS)
678 87
|
人工智能 自然语言处理 API
Cline:29.7K Star!一文详解VSCode最强开源AI编程搭子:一键生成代码+自动跑终端+操控浏览器...
Cline 是一款集成于 VSCode 的 AI 编程助手,支持多语言模型,实时检查语法错误,帮助开发者提高编程效率。通过智能化手段,Cline 可以生成代码、执行终端命令、调试 Web 应用,并扩展更多功能。
7692 74
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
1103 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
1033 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
css3实现3D数字时钟滚动特效代码
css3实现3D数字时钟滚动特效代码
623 18
纯css3发光霓虹灯文字闪烁特效代码
纯css3发光霓虹灯文字闪烁特效代码是一款彩色的店铺名称文字动画特效。
331 6
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
339 2
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
690 6