前端 解决IE兼容问题

简介: 前端 解决IE兼容问题

在HTML中添加如下代码:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


可以指定网页的兼容性模式设置,告诉IE以最高级模式渲染文档,任何IE版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。


Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器


chrome=1 用以声明当前页面用chrome内核来渲染。


IE=edge,chrome=1 这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果未安装GCF,则使用最高版本的IE内核进行渲染。


X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。


网页的浏览器兼容的重要性:


1、网站做好了浏览器兼容,能够让网站在不同的浏览器下都正常显示


2、浏览器兼容能够抓住更多的网站访客


3、浏览器兼容能够给客户更好的体验


注意事项:


1,根据官网定义X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话,它不起作用。


2,content的内容是IE=8,或者IE=edge等值,注意不是IE8或者直接写个edge的值,否则不起作用。

目录
相关文章
|
前端开发 JavaScript 测试技术
前端常见兼容问题系列8: 安卓机器中通过JS设置焦点无法拉起软键盘
有时候,为了优化用户体验,做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘,这样用户不用点击输入框就可以直接输入。的确,这对用户来说很方便。但真正用HTML5页面去实现的时候,却遇到了问题。 首先我做了这样一个demo。 ``` Title #input1{
4364 0
|
Web App开发
clearTimeout 方法在IE上的兼容问题
clearTimeout 方法在IE上的兼容问题
212 0
|
移动开发 前端开发 HTML5
web页面实现全背景视频功能方案:使用bideo.js来处理object-fit在ie浏览器下不兼容问题
web页面实现全背景视频功能方案:使用bideo.js来处理object-fit在ie浏览器下不兼容问题
504 0
web页面实现全背景视频功能方案:使用bideo.js来处理object-fit在ie浏览器下不兼容问题
|
JavaScript 前端开发
DZMFullPage - 前端分页动画插件,兼容IE9+,支持Vue
DZMFullPage - 前端分页动画插件,兼容IE9+,支持Vue
301 0
|
前端开发
轻量级前端路由 router directorjs兼容ie8
轻量级前端路由 router directorjs兼容ie8
261 0
|
Web App开发 前端开发 测试技术
前端常见兼容问题系列6: 一些安卓APP的WebView中<input type="file">不工作
安卓APP的WebView默认屏蔽了该控件的使用,有些安卓APP之所以能支持文件选择和上传,主要可能是有可能采取了如下措施之一: (1)可能在该APP中重写了相关方法 (2)提供了JS Bridge来供web页面调用
10858 2
|
Web App开发 前端开发 测试技术
前端常见兼容问题系列3:永远置于顶层的video
在许多安卓手机的UC浏览器中,存在video标签无法被元素遮盖的情况,有可能是UC把video解析成了native控件所致。 Title .content{ position: fixed;
4264 0
|
Web App开发 编解码 移动开发
前端面试:所问到的兼容问题
前端面试:所问到的兼容问题
|
Web App开发 JavaScript 前端开发

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1125
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    496
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    384
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    373
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    490
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    666
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1113
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    261
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    951
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    446