IE低版本常见的兼容问题解决

news/2024/11/8 3:33:52/

当每次谈到解决低版本IE兼容问题时,不知道大家有没有一种头皮发麻的感觉(内心独白:谁tm发明的IE,我要s了他,开个玩笑).

下面我们就简单谈一谈低版本IE常见的兼容问题:

在我们解决浏览器的兼容问题时,我们需要了解为什么会出现浏览器的兼容问题:

1各大厂商出于自身利益考虑而设置的种种技术壁垒,都让CSS应用起来比想象得要麻烦

2由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床

再了解下现在的几大主流浏览器及其内核
1、IE 内核:Trident
现在更新到最新版的IE11,之前有的版本有IE5\6\7\8\9\10,IE8及IE8之前版本不支持html5和css3,所以一般IE兼容只做到IE8以上不是有特别需求,一般不考虑低版本IE兼容。
2、Mozilla(火狐) 内核:Gecko
3、Google(谷歌) 旧版本内核WebKit,新版本内核Blink
4、Opera (欧朋) 新版本内核Blink

IE相关兼容及解决
A:图片png24格式的兼容,png24格式在IE6上不透明

hack:把png24格式换成png8或者GIF格式

B:默认高度 (如果是需要看不见一定要加height:0;如果是需要其他的数值,那么就给其他的数值)
描述:在IE7或者IE6及以下版本中,部分块元素拥有默认高度(在16px左右;)

hack1:给元素添加声明:font-size:0;
hack2:给元素添加声明:overflow:hidden;

C、双倍浮向(双倍边距)(只有IE6出现)
描述:当Ie6及更低版本浏览器在解析浮动元素时,
会错误地把浮向边边界(margin)加倍显示。

hack:给浮动元素添加声明:display:inline;

D、在IE6及更低版本的浏览器里,如果想去掉input的默认边框,不能设置border:none;

hack:设置input{border:0;

E、如果设置了input的高度,在其他浏览器上显示的value的内容是垂直居中的,但是在ie6上是在顶部的

hack:给input添加一个行高等于它的高度。

F、在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。(也会受系统影响)

hack:给右面的浮动元素添加声明:clear:right;

G、IE7及以下浏览器li有时候会莫名的向下撑大3-4像素。

hack:给li添加一个 +margin-top:-3px或者-4px

当我们需要对IE浏览器设置专属样式时,我们就需要用到过滤器,
下面我就举几个常见的例子

1) 下划线属性过滤器 选择符{_属性:属性值;}
由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明,
但是在IE6及更低版本浏览器中会继续解析这个规则

2) !important关键字过滤器 选择符{属性:属值 !important;}
它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它,
我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器。

3) \9 选择符{属性:属性值\9;} IE浏览器组识别

4) \0 选择符{属性:属性值\0;} 只有IE8及以上浏览器起作用

5) + 或者 * 选择符{+属性:属性值;} ie7 IE7 以下(包括IE7) 识别

6) :root选择器 :root 选择符{属性:属性值;} 除了IE8及更早的浏览器识别


http://www.ppmy.cn/news/768900.html

相关文章

h5前端IE浏览器低版本判断及升级提示

需求&#xff1a; 由于公司项目对于ie浏览器只支持ie10及以上版本&#xff0c;为了更好的用户体验及人性化提示&#xff0c;想在代码里判断下ie浏览器低版本加个提示。 解决方案&#xff1a; 先贴代码&#xff1a; <!--[if lte IE 9]><script>alert("您正…

IE浏览器低版本判断及升级提示

需求&#xff1a; 由于公司项目对于ie浏览器只支持ie10及以上版本&#xff0c;为了更好的用户体验及人性化提示&#xff0c;想在代码里判断下ie浏览器低版本加个提示。 解决方案&#xff1a; 先贴代码&#xff1a; <!--[if lte IE 9]><script>alert("您正在使…

IE高版本如何设置IE低版本进行测试

安装过ie高版本之后&#xff0c;再安装低版本ie的时候 会提示 已经有新的版本存在&#xff0c;作为开发者来说&#xff0c;有时候做前端页面的时候需要兼容好几个版本&#xff0c;比如要兼容ie8以上。但是随着电脑系统的更新 自带的ie版本也升级了&#xff0c;现在我的版本是ie…

兼容ie低版本

刚开始不需要兼容ie&#xff0c;后来加了需求&#xff0c;说要兼容ie低版本&#xff0c;低版本打开项目是空白&#xff0c;碰到这样的事情是不是很头疼&#xff0c;需改如下 1&#xff0c;vue&#xff0c;react项目中引用babel.js&#xff0c;原理是把es6语法转成es5&#xff…

计算机安装了更新ie版本,win7重做后,发觉IE浏览器版本低,怎么办?今天教大家重装系统后,升级IE浏览器-win7版本...

有好多人喜欢微软原装的纯净系统&#xff0c;特别是一些办公的人们喜欢IE浏览器&#xff0c;不喜欢第三方浏览器&#xff0c;因为好多办公的网页不兼容别的浏览器&#xff0c;那么重做微软原装的win7,发现ie浏览器版本过低&#xff0c;很多网站不兼容。那么今天来教大家学习把w…

【IE11】兼容低IE版本的设置方法

当电脑上安装IEtester无法使用&#xff0c;而本机又恰巧安装了IE11&#xff0c;可以通过设置IE11兼容性为 IE8、IE9、IE10等&#xff0c;来设置低版本的IE兼容性 Step1&#xff1a;点击键盘的【F12】键&#xff0c;弹出调试界面。如图1所示。 step2&#xff1a;点击如图1中的红…

解决IE浏览器低版本兼容性问题的最快方法

解决IE8以下浏览器低版本的兼容性问题&#xff0c;最快的方法就是将以下代码放在网页的head标签内&#xff1a; <!--[if lte IE 8]> <script async>location.href "https://emuchong.com/x/update.html"; </script> <![endif]--> 这种方…

字体图标兼容性,兼容IE

http://www.w3cfuns.com/thread-5597432-1-1.html font-face是CSS3中的一个模块&#xff0c;他主要是把自己定义的Web字体嵌入到你的网页中&#xff0c;随着font-face模块的出现&#xff0c;我们在Web的开发中使用字体不怕只能使用Web安全字体&#xff0c;你们当中或许有许多…