当前位置:首页 » 网页前端 » 前端ie浏览器兼容
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端ie浏览器兼容

发布时间: 2022-11-30 08:34:04

‘壹’ ie浏览器如何添加兼容性

方法如下:
1、首先打开电脑,进入到电脑桌面中。
2、然后打开IE浏览器,点击打开右上角工具齿轮就可以看到“兼容性视图设置”,点击打开它。
3、然后在弹出来的窗口中输入想要设置兼容的网站,点击后面的“添加”。
4、然后点击打开最下方的两个选择,车确定即可。

‘贰’ 前端 PC端兼容性问题总结

1.如果图片加a标签在IE9-中会有边框

2.rgba不支持IE8

3.display:inline-block ie6/7不支持

4.默认的 body 没有 body 去掉 margin 情况下ie5、6、7边缘会很宽margin-top加倍 如果处于无声明状态那么所有的ie浏览器margin-top加倍
解决方案:用 css 给 body 添加 magin 属性为0px

5. IE 6.0 Firefox Opera 等是 真实宽度=width+padding+border
IE5.X 真实宽度=width
解决方案:
方法1.

方法2.

6. height 不能小于16px,设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

7. min-height 不兼容 ie6 7解释为超过高度就撑开,而其他版本浏览器则遮盖下面的层

8. position:fixed IE5 6无法识别此属性

9.浮动的div有 margin_left 属性ie6会加倍 无论兼容视图还是无声明视图

10. cursor 兼容 自定义指针cur格式的图片url路径问题无论是兼容还是无声明版本

11.png图片 IE6里面的png图片不能透明 兼容版本和无声明版本都是

12.img浮动 img标签打回车会造成每个图片之间有缝隙
解决方案:可以删除之间的回车键也可以让这些图片浮动

13.在IE浏览器下 input type="text" 文本框点击时后面会出现"X",以及 type="password "后面会出现眼睛,如何除去这两种默认样式

14.CSS3前缀 -webkit- webkit渲染引擎 chrome/safari

-moz- gecko渲染引擎 firefox

-ms- trident渲染引擎 IE

-o- opeck渲染引擎opera

动画、过渡、 background-size 都需要加前缀

16. PIE.htc 可以实现很多 css3 属性在IE下的兼容性 如:圆角、阴影、渐变

behavior: url(css/PIE.htc);/ IE边框阴影 /
}`
背景透明rgba

注: PIE.htc 文件路径相对是相对于css文件,并非html文件,以上例子是将 PIE.htc 文件放在与css样式文件同一个文件夹 css 内,而对应的 html 问价与 css 文件夹同级

17.JS实现点击跳转到指定位置

‘叁’ ie浏览器不兼容怎么弄

ie浏览器不兼容的解决方法如下:
1、首先打开IE浏览器,随意进入一个页面;
2、点击“工具”选项,会跳出一个菜单,下拉菜单选择“兼容性视图设置”选项;
3、进入兼容性视图设置之后,填入所需要设置兼容模式的网址,点击添加,最后点击关闭即可。
InternetExplorer(旧称:MicrosoftInternetExplorer、WindowsInternetExplorer),简称IE或MSIE,是微软公司推出的图形用户界面网页浏览器,曾是使用最广泛的网页浏览器之一。自从1995年开始,它被内置在各个新版本的Windows作业系统作为默认浏览器,也是微软Windows操作系统组成部分。2015年3月微软确认将放弃IE品牌,转而在windows10上,以MicrosoftEdge取代,并停止发布InternetExplorer11之前版本的安全性更新。
更多关于ie浏览器不兼容怎么弄,进入:https://m.abcgonglue.com/ask/4f3b5a1615837924.html?zd查看更多内容

‘肆’ 前端开发ie浏览器的兼容问题怎么解决

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么
浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在学习浏览器兼容性之前,我想把前端开发人员划分为两类:
第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都是浏览器的bug,并且他们制作的页面后期易维护,代码重用问题少,可以说是比较牢固放心的代码。
第二类是基本按照设计图来开发的前端开发人员,很多细枝末节差距很大,不如间距,行高,图片位置等等经常会差几px。某种效果的实现也是反复调试得到,具体为什么出现这种效果还模模糊糊,整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器,而是他们的技术本身了。

‘伍’ ie浏览器怎么设置兼容模式设置

IE浏览器设置兼容模式步骤如下:

1.打开IE浏览器

‘陆’ 如何设置IE浏览器的兼容模式

IE浏览器的兼容模式在浏览器的设置——兼容性视图中进行设置,具体的操作方法如下:

1、这里IE11浏览器为具体的实例,首先在浏览器的主页面的左上角方向点击【设置】图标。

2、进入到浏览器的设置的操作页面以后,然后选择【兼容性视图设置(B)】。

3、最后进入到兼容性视图设置操作页面以后,在【添加此网站】中输入你要以兼容性视图运行的网站,然后点击【添加】。(以后进入到这个网站的时候就会以兼容模式运行)

‘柒’ ie浏览器的兼容性怎么设置

方法如下:
1、在windows的找到IE的浏览器,并进行打开ie的浏览器。
2、在使用ie的浏览器,菜单栏中是无显示的,需要进行打开,右键菜单栏,弹出下拉的菜单中,勾选上“菜单栏”和“兼容性视图按钮”。
3、这样菜单栏中显示出菜单,然后点击菜单中“工具”。
4、选中工具完之后,弹出了下拉的菜单中,进行选中“兼容性视图设置”的选项。
5、这样就打开兼容性视图设置,在添加此网站中进行输入需要作为兼容网址,然后点击“添加”。
6、在最低端位置中,勾选上所有的选项,这样的话就可以不用一次一次进行添加网址了。

‘捌’ 前端面试题之解决浏览器兼容性的方案

浏览器兼容性涉及的内容有很多,特别是针对IE浏览器,以下整理出五种常见的浏览器兼容性解决方法。

一、样式初始化

由于各大浏览器会有自身的默认样式,并且不尽相同,所以为了尽可能的保证样式的统一性,前端在开发项目之前都会先进行样式格式化,最常见的分为以下几个方面。

1.pandding 值和 margin 值均设置为 0

将html、body、a、li、ol、input、textarea、select、button 等标签的 padding 值和 margin 值设置为 0。

2.html 标签

设置统一的字体,如果使用 rem 单位,则 html 需要设置合适的字号。

3.a 标签

设置统一的颜色,将 text-decoration 属性设置为 none。

4.ol 和 li 标签

list-style 统一设置为 none。

5.input、textarea、select、button 等标签初始化

border 设置为 none;

根据需要设置颜色和背景色。

二、使用不同类型的浏览器内核前缀

1.Chrome(谷歌浏览器) 与 Safari(苹果浏览器) 内核:Webkit (中译无) 前缀:-webkit-

2.IE (IE浏览器) 内核:Trident (中译三叉戟) 前缀:-ms-

3.Firefox (火狐浏览器) 内核:Gecko(中译壁虎) 前缀:-moz-

4.Opera (欧朋浏览器) 内核:Presto(中译迅速) 前缀:-o-

例:

-webkit-border-radius: 10px; / 谷歌浏览器 /
-ms-border-radius: 10px; / IE浏览器 /
-moz-border-radius: 10px; / 火狐浏览器 /
-o-border-radius: 10px; / 欧朋浏览器 /
border-radius: 10px;
1
2
3
4
5
三、针对IE浏览器不同版本的解决方案

1.对于低版本的 IE 浏览器使用 CSS hack( 即给特点前缀)

注:以下符号是写在属性名前面。

兼容 IE6 的 hack 符号:- 或 _

兼容 IE6 、7 的 hack 符号:` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 任意一个符号

兼容 IE6、7、8 的 hack 符号:.

注:以下符号是写在属性值与分号直接,中间不留空格。

兼容 IE8 的 hack 符号:/

兼容 IE8、9、10 的 hack 符号:

兼容 IE6、7、8、9、10 的 hack 符号:9

例:

/ hack符号在前 /
_border-radius: 10px; / IE6 /
+border-radius: 10px; / IE67 /
.border-radius: 10px; / IE678 /

/ hack符号在后 /
border-radius: 10px/; / IE8 /
border-radius: 10px; / IE8910 /
border-radius: 10px9; / IE678910 /
1
2
3
4
5
6
7
8
9
2.为不同的版本编写独立的样式,其他浏览器识别不到。

例:大于 IE9 的浏览器使用这个单独的 style9.css 样式

1
2
3
例:只有 IE6 浏览器使用的 style6.css 样式

1
2
3
四、其他特殊样式

1.cursor 属性的 hand 值和 pointer 值

问题:firefox 浏览器不支持 hand 值,但其他浏览器均支持 pointer 值。
解决: 统一使用 cursor 属性的 pointer 值。

2.水平居中

问题:IE8 及IE8 以下版本浏览器不可通过设置 margin:0 auto 实现水平居中。

解决: 可通过设置父级 text-align:center 实现。

3.属性值 “inherit”

问题:IE8 及IE8 以下版本浏览器不支持属性值 “inherit”。

解决:谨慎使用属性值 “inherit”。

五、JS兼容性

1.ES6语法

问题:IE11 不支持箭头函数、class 语法等(报 SCRIPT1002: 语法错误),不支持 Set 和 Map 数据结构(不报错)及 Promise 对象,支持 let 和 const,IE10 及以下不支持任何 ES6 语法。

解决:如果要兼容IE浏览器的项目请使用 ES5 语法或者使用 Babel 进行转换。

2.操作 tr 标签

问题:IE9 及 IE9 以下版本浏览器,不能操作 tr 标签的 innerHTML 属性。

解决:可以操作 td 标签的 innerHTML 属性。

3.Ajax

问题:IE9 及 IE9 以下版本浏览器无法使用 Ajax 获取接口数据。

解决:在使用 Ajax 请求之前设置 jQuery.support.cors=true。

4.event 对象的 srcElement 属性

问题:IE8 及 IE8 以下版本浏览器 event 对象只有 srcElement 属性,没有 target 属性。

解决:obj = event.target?event.target:event.srcElement。

5.DOM 事件绑定

问题:IE8 及 IE8 以下版本浏览器是用 attachEvent() 方法,而其他浏览器是 addEventListener() 方法。

解决:判断 IE 浏览器版本,如果是 IE8 及以下 事件绑定则使用 attachEvent() 方法,注意 attachEvent() 方法的用法,第一个参数为“onclick” 而不是“click”。并且没有第三个参数。