HTML和CSS中如何判断ie各版本浏览器
2014-01-16 17:05
513 查看
在编写网页代码时,经常遇到的就是兼容性问题,尤其ie6,让很多人头疼,各种浏览器的兼容性是个必须考虑的问题,有些时候无法找到适合所有浏览器的写法,就只能写根据浏览器种类区别的代码,这时就要用到判断代码了。而区分浏览器分为两种情况,一种是html代码,一种是css代码,经常用到!
当然另外一直办法就是直接用js判断,请见我的另外一篇文章:js判断浏览器类型及版本详细分析 (js判断ie6)
1.在HTML代码中,区别各种浏览器的代码如下(以ie6为例,这时目前国内用户最多的,得益于盗版xp系统的广泛流传….不过这玩意也是绝大部分兼容性问题的根源,因为其标准化程度实在是….):
以上这些代码写法都是针对ie各版本浏览器的,在其他浏览器中这些代码都会被解释为Html注释而直接无视掉,所以要想些针对firefox之类的非ie浏览器,需要这么写:
—————————————————分割线———————————————————
2.CSS代码中,则可以根据各浏览器自己独立的可识别的特殊代码来编写区分浏览器的代码,例如为IE系列浏览器可读[\9],而IE6和IE7可读[*],另外IE6可辨识[ _ ](下划线);由于CSS读取时是按从上到下来的,同样属性靠后写的生效,因此可以依照顺序写下来,就会让每个浏览器正确的读取到自己看得懂得CSS语法,有效区分各类型或版本:
类似的还有:
因为其他浏览器可读取「!important;」但IE6却不行。
当然另外一直办法就是直接用js判断,请见我的另外一篇文章:js判断浏览器类型及版本详细分析 (js判断ie6)
1.在HTML代码中,区别各种浏览器的代码如下(以ie6为例,这时目前国内用户最多的,得益于盗版xp系统的广泛流传….不过这玩意也是绝大部分兼容性问题的根源,因为其标准化程度实在是….):
123456 | <!–[if IE 6]> 仅IE6可识别 <![endif]–><!–[if lte IE 6]> IE6及其以下版本可识别 <![endif]–><!–[if lt IE 6]> IE6以下版本可识别 <![endif]–><!–[if gte IE 6]> IE6及其以上版本可识别 <![endif]–><!–[if gt IE 6]> IE6以上版本可识别 <![endif]–><!–[if IE]> 所有的IE可识别 <![endif]–> |
1 | <!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–> |
2.CSS代码中,则可以根据各浏览器自己独立的可识别的特殊代码来编写区分浏览器的代码,例如为IE系列浏览器可读[\9],而IE6和IE7可读[*],另外IE6可辨识[ _ ](下划线);由于CSS读取时是按从上到下来的,同样属性靠后写的生效,因此可以依照顺序写下来,就会让每个浏览器正确的读取到自己看得懂得CSS语法,有效区分各类型或版本:
123456 | .classname{background:blue; /*Firefox等非IE浏览器背景变蓝色*/background:red \9; /*IE8 背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} |
1 2 3 4 | .classname { background:black !important; /*非IE6 背景变黑色*/ background:orange; /*IE6 背景变橘色*/ } |
相关文章推荐
- CSS3 Box-sizing
- js获取某元素的class里面的css属性值
- 人人网FED CSS编码前端开发规范
- css代码优化
- (转载)css垂直水平居中的整理
- 19 套最佳 HTML/CSS 定价表模板及教程
- 利用IE/FF的不同识别CSS来使用浏览器兼容问题
- JS可以控制样式的名称写法一览
- CSS负边距自适应布局三例
- 响应式设计介绍
- 使用DIV CSS的误解解释
- css3超过指定宽度文字,显示省略号
- css3动画系列之animation 属性
- css position 的解读
- CSS 针对谷歌或者360(Chrome) safari的webkit核心浏览器 兼容性处理
- css3动画系列之@keyframes规则
- css如何自动换行对于div,p等块级元素(转)
- css如何自动换行对于div,p等块级元素(转)
- JS点击事件触发弹出窗口样式控制
- 用css3实现鼠标移进去当前亮其他变灰