【前端新手】实现ie浏览器界面兼容所遇的坑
来源:互联网 发布:古装淘宝 编辑:程序博客网 时间:2024/06/01 07:52
- 页面<head>标签请务必引入下行代码,可实现让ie浏览器以最高版本的渲染引擎进行页面渲染。——相信很多小伙伴都熟悉了这个meta
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
这就避免出现以下坑爹情况:ie版本很高,但界面可能还是以低版本进行渲染。像我之前忘设置了,测试那边反馈给我在ie11浏览器中还弹出进行版本升级的提示。
2. 使用hack手段,针对不同浏览器设置不同的样式展示
使用案例:
使用案例:<!--[if lte IE 6 ]> <html class="ie ie6 lte_ie7 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]--><!--[if IE 7 ]> <html class="ie ie7 lte_ie7 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]--><!--[if IE 8 ]> <html class="ie ie8 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]--><!--[if IE 9 ]> <html class="ie ie9 lte_ie9" lang="zh-CN"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh-CN"> <!--<![endif]--> //重点:注意<!-->标签并不多余哦然后在css中类似引用:.ie8 XX { } //就可以只针对ie8浏览器使用该样式
注意:我并不推荐像案例那样直接在<html>标签中使用hack方法,应该尽力保持<html>简洁。为什么呢?
——因为在项目开发时,我遇到这样一个情况:在<html>使用hack方法为不同浏览器设置了相应的class属性,并且在<head>头部也配置了
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
结果在XP系统的ie8中进行测试时,界面默认以ie8兼容的浏览器模式(ie7标准)进行显示,这就照成了我页面部分布局被破坏。具体底层是什么原因导致的,我也不清楚。后来的解决方法是:对body使用hack方法可避免这种情况出现,如下:
<!--[if lte IE 7 ]> <body class="actfc lte_ie7" > <![endif]--><!--[if (gte IE 8)|!(IE)]><!--> <body class="actfc"> <!--<![endif]-->对需要在ie8以下显示的样式,只需要在css选择器前面加上 .lte_ie7 即可
解决这种情况的方法不止着一种,还可以用js代码判断ie浏览器的版本,并未不同版本设置样式。
所以,这里面的关键就是:<meta http-equiv="X-UA-Compatible" content="IE=edge" />要在hack注释之前配置。
未完待续。。。
阅读全文
0 0
- 【前端新手】实现ie浏览器界面兼容所遇的坑
- 实现ie浏览器对placeholder的兼容
- IE浏览器的兼容模式
- 针对IE的浏览器兼容
- 半透明的圆角矩形实现IE浏览器兼容
- 前端开发的那点事-------------ie绝对是个神坑,360浏览器的兼容模式依然是个神坑
- jQuery实现IE浏览器兼容placeholder效果
- 实现IE浏览器兼容placeholder效果
- web前端知识汇总-浏览器兼容(主要IE)
- 前端开发之如何兼容IE8等旧IE浏览器
- ie兼容响应式布局的实现总结 和 针对ie浏览器的CSS
- 前端中文参数兼容IE的办法
- 兼容IE系列浏览器的CSS Hack
- jplayer不兼容IE浏览器的问题
- placeholder在ie浏览器的兼容
- 兼容IE浏览器的css样式
- IE 浏览器下的兼容(onclick)
- 记最近ie浏览器的兼容
- java反射学习
- 9.7 今天学到了什么
- 51Nod 1079中国剩余定理(孙子定理)
- PMS 简析
- PAT 乙级练习题1008. 数组元素循环右移问题 (20)
- 【前端新手】实现ie浏览器界面兼容所遇的坑
- 简单背包练习——分组背包
- AS出现Unsupported major.minor version 52.0
- 关于android的mk文件的一些见解
- 希尔排序 Java实现
- tomcat如何配置环境变量
- 重建二叉树06
- 关于leetcode Minimum Window Substring的思考
- Nginx作为反向代理