ie8的兼容性问题

author author     2022-08-17     767

关键词:

IE的兼容性问题是前端开发人员的老大难问题,不过随着时代的发展,IE6逐渐的被淘汰,现在以及很少有网站兼容IE6了,一般都兼容到IE8,现在我总结了一些IE8的兼容性问题及解决方法。

1.使用meta标签调节浏览器的渲染方式

IE8中有一个“兼容性视图”的概念,当初IE8发布时,相对于IE6/7已经做出了非常大的改进,但是很多老站点仅针对IE6/7进行了优化,使用IE8渲染反而会一团糟。为了照顾这些苦逼的前端工程师,IE8加入了“兼容性视图”功能,这样的话就可以在IE8中使用IE6或IE7的内核渲染页面。这个当然不是我们想要的,所以需要使用meta标签来强制IE8使用最新的内核渲染页面,代码如下:

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

  IE=edge表示强制使用IE最新内核,chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame(可以让用户的浏览器外观依然是IE的菜单和界面,但用户在浏览网页时,实际上使用的是Chrome浏览器内核),那么就用Chrome内核来渲染。

2.实现css3的某些特性

IE8不支持CSS3的很多新特性,不过我们可以使用一些比较成熟的hack方法,我采用的是CSS3 PIE,它支持的特性有这些:border-radius、box-shadow、border-image、multiple background images、linear-gradient等。

3.识别html5元素

如果你在前端代码中使用了HTML5的新标签(nav/footer等),那么在IE中这些标签可能无法正常显示。我使用html5shiv,具体使用方法见文档。

4.关于max-width

还有一个在IE8中经常遇到的问题就是max-width,网页中图片的尺寸可能比较宽,我会给它设置max-width: 100%来限制其宽度最大为父容器的宽度,但是有时候却不奏效,慢慢摸索才得知IE解析max-width所遵循的规则:严格要求直接父元素的宽度是固定的。经实验发现Chrome所遵守的规则比IE松一些,所以这个问题应该不归属为IE兼容性问题,不过我还是提一下吧。分享两个我遇到的场景:

(1)td中的max-width

如果针对td中的img元素设置max-width: 100%,在IE和Firefox你会发现不奏效,而在Chrome中却是可以的。经查询发现需要给table设置table-layout: fixed,对此属性的具体解释见W3School

(2)嵌套标签中的max-width

如下的HTML结构:

<div class="work-item">
    <a href="#" class="work-link">
        <img src="sample.jpg" class="work-image img-responsive">
    </a>
</div>

  

最外层元素.work-item设置了固定宽度,但是对img设置max-width为100%却无效,后来才发现需要再对a标签设置width: 100%,这样才能使最内层的img标签充满整个div。

5.嵌套inline-block下padding元素重叠

html代码:

<ul>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
</ul>

css代码:

ul li{
    display: inline-block;
}
ul li a{
    display: inline-block;
    padding: 10px 15px;
}

按理来说a标签之间的距离应该是30px,但在IE8中出现了重叠,只有15px。我的解决方法是使用float: left替代display: inline-block实现水平布局。

6.placeholder

IE8下不支持HTML5属性placeholder,不过为解决此问题的js插件挺多的,比如:jquery-placeholder

7.img标签上下有3px的留白

解决办法: 1.给元素加font-size: 0 ;

               2.给img标签加float: left;

8.png24的图片格式有背景图

将图片的格式改为png8的格式

解决在 IE8 上运行 javascript reduce() 方法的兼容性问题

】解决在IE8上运行javascriptreduce()方法的兼容性问题【英文标题】:Solvingcompatibilityissuesrunningjavascriptreduce()methodonIE8【发布时间】:2020-11-2504:05:48【问题描述】:您好,我有一个需要在IE8中运行的网络程序。在IE8上,不直接支持java... 查看详情

ie8兼容问题

最近做的网站,需要兼容IE8,在这里记录一下,碰到的问题,方便以后查看补充1.CSS选择器nth-child不兼容ulli:nth-child(2){background-image:url(../img/2.jpg);background-size:cover;}IE8不兼容这种写法在网上百度了一下兼容写法 戳这里由于我的... 查看详情

ie8的input兼容性问题

在chrome、firefox、IE9+都是支持input事件 在IE8中,单纯的input事件无法监听输入框中变化,需要与propertychange共用 测试代码如下:1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<scriptsrc="jquery-1.11.3 查看详情

ie8兼容问题

setInterval的用法如下:functionfunc(){setInterval("alert()",1000,this);//chrome适用,但不能传参数setInterval("alert",1000,this);//chrome、ie8都不适用setInterval(alert,1000,this);//chrome适用,可传参,ie8适用,不可传参}IE8用setInterval是 查看详情

ie8兼容问题(代码片段)

input标签placeholder1.input里面的placeholder属性,在pc端用的特别好,但是万恶的ie8,placeholder竟然不支持。于是找到一种方法解决在ie8中placeholder无效的事$(function()//如果不支持placeholder,用jQuery来完成if(!isSupportPlaceholder())//遍历所有inpu... 查看详情

:before添加图片,ie8兼容

这是项目开发中遇到的奇怪的小问题:在IE8下出现按钮点击后消失了,鼠标点击页面后却又出现:最初的代码:添加背景图片的方法,这样是存在兼容问题的。更改后代码:content中添加图片,完美兼容IE8  查看详情

兼容ie8的js格式化日期方法,解决ie8不支持date()的问题

functiondateFormat(dateString,format){if(!dateString)return"";vartime=newDate(dateString.replace(/-/g,‘/‘).replace(/T|Z/g,‘‘).trim());varo={"M+":time.getMonth()+1,//月份"d+":time.getDate(),//日"h+":time. 查看详情

记录兼容ie8中发现的一些问题

1.newDate().getYear();chrome下:获取的是1900年之后的年份,如2017年获取的是117IE8下:获取的是公元年份,如2017获取的是2017解决方案:使用newDate().getFullYear();,统一获取公元年份,如2017获取的是20172.parseInt()parseInt在解析开头为0的数... 查看详情

ie8兼容性_1:document.onclick失效

问题描述:在某些情况下,document.onclick在ie8浏览器下会不起作用。问题原因:与某些第三方插件有关。解决方案:把添加到document上的点击事件改为添加到body上的点击事件即可解决。     eg:document.onclick=fun;改为document.b... 查看详情

是否可以在 CSS 中定位 IE8 的兼容性视图?

】是否可以在CSS中定位IE8的兼容性视图?【英文标题】:IsitpossibletotargetIE8\'scompatibilityviewinCSS?【发布时间】:2011-04-0306:49:35【问题描述】:这可能吗?我会假设兼容性视图很像旧的IE,所以我尝试了<!--[ifltIE8]>cssgoeshere<![en... 查看详情

D3 IE8 兼容性?

】D3IE8兼容性?【英文标题】:D3IE8Compatibility?【发布时间】:2013-06-1615:06:50【问题描述】:有什么方法可以让D3兼容IE8?此处和文档中的许多帖子都建议使用aight。https://github.com/shawnbot/aight/blob/master/aight.js但是,我将提到的行/文... 查看详情

ie8兼容性

...于ie8的兼容问题:1.更改ie8浏览器的文本模式  2.兼容性的处理(样式的写法问题排除哦),别说我坑你,坑你是没有道理的,,,,,哈哈哈哈哈处理这样的问题先要在文件开头让浏览器去解析改以何种方式<!DOCTYPE ... 查看详情

常见的兼容性问题解决方案

1.区别IE和非IE浏览器#demo1{background:blue;/*非IE背景藍色*/background:red9;/*IE6、IE7、IE8背景紅色*/}2.区别IE6,IE7,IE8,FF【区别符号】:「9」、「*」、「_」【示例】:#demo2{background:blue;/*Firefox背景变蓝色*/background:red9;/*IE8背景变红色*/*backg 查看详情

覆盖内网兼容模式 IE8

...rrideintranetcompatibilitymodeIE8【发布时间】:2011-01-3120:58:33【问题描述】:默认情况下,IE8强制Intranet网站进入兼容模式。我尝试将元标头更改为IE8,但它不承认元标头,只使用浏览器设置。有谁知道如何禁用此功能?【问题讨论】... 查看详情

ie8兼容问题(代码片段)

最近在做一个项目,要求是兼容IE8,写页面时,用到的很多css属性IE8都不兼容,想要的效果也呈现不出来。1,background:url后面要空格background:url(../img/background.png)no-repeat改成background:url(../img/background.png)no-repeat2、background-size无效暂... 查看详情

让foreach兼容ie8

今天在做项目中遇到一个问题,就是forEach不兼容IE8;后经查阅资料完美解决问题。资料:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?v=example1//官网查询的兼容代码段2//ProductionstepsofECMA-262,Edition5 查看详情

ie8兼容

  最近在做ie8兼容,把遇到的问题整理了一下  1.margin:0auto;无法居中解决方法:1.换成h4的文档类型<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 查看详情

ie8常见兼容问题及解决方法总结(代码片段)

    IE8及以下版本的浏览器对前端来说就是一个BUG的存在,但是总也绕不过去,非技术性官网一般会要求网站兼容到ie8,有时候甚至要到ie7,总之IE8是一定要能hold住。最近公司一个比较小众的项目,因为要通过控件... 查看详情