由于业务的需要,我们竟然还要支持IE8,听着就让人很心酸呀。不过在进行适配的过程中,会发现还是有一定规律的,基本上帮相关问题改了,页面也就能正常显示了。下面就总结下对IE8适配过程中所进行的修改。

1. CSS不支持 rgb() 以及 rbga() 函数

建议在IE8上使用纯色而非带透明度的颜色,如果一定要使用有透明度的颜色的话,可以使用 filter:alpha(opacity=xx);来模拟,但需要注意,用 filter 设置的透明度是对整体设置的,跟 opacity 一样,而非仅仅对颜色起作用。

background-color: rgba(102, 102, 102, 0.2);

可以改为

background-color: #666666;
background-color: rgba(102, 102, 102, 0.2);
filter: alpha(opacity=20); /*support iE8*/

2. :hover 样式无效,因为在IE8上只有 <a> 标签支持 :hover 样式

建议将 :hover 样式放在 <a> 上,如果一定要在 <span>,<li> 等标签上使用,可以利用 JavaScript 的 mouseenter 、mouseleave 等事件来设置样式。

3. IE8仅部分支持CSS3选择器,如 element1~element2 、 element1+element2 、 [attr^=val]  ,  [attr$=val] 以及 [attr*=val] ,不支持 :last-child 、 :not() 等选择器,所以在选择器的使用上需要注意

4. IE8不支持 background-size

有时为了使图片看起来更加清晰,部分背景会使用2倍图,然后通过设置容器的大小以及 background-size 等属性使图片缩放到正确的尺寸,但由于IE8不支持 background-size 属性,所以使用2倍图会超出容器大小,所以在IE8上要用CSS进行 hack 处理。

background-image: url(images/logo@2x.png);
background-image: url(images/logo.png) \9; /* ie8 hack,在ie8上使用1倍图 */
background-size: contain;

需要注意,在less中要写成 background-image: url(images/logo.png) ~"\9";

5. IE8中为 <a> 的 href 属性设置 mailto: xxxx; 时,浏览器会将 <a> 的显示的内容替换成 href 属性。

如 <a href="mailto:service@163.com">咨询</a> ,在IE8上会显示成 <a href="mailto:service@163.com">mailto:service@163.com</a> 。

这个是IE的一个BUG,正常来说,不解决也不会有什么问题,但是如果一定要精益求精的话的话,可以用JavaScript对其进行修改。

IE8兼容性问题的更多相关文章

  1. bootstrap IE8 兼容性处理

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  2. CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

    css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px;       /*ff的属性*/margin-bottom:140px\9;    /* IE6 ...

  3. IE8兼容性经验小结

    DOCTYPE 首先需要确保HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响: 1.对标记,attributes, ...

  4. ie8兼容性总结

    DOCTYPE 首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响: 对标记.attributes ...

  5. ie8兼容性(不支持trim 、readonly光标、乱码encodeURI())

    IE8下String的Trim()方法失效的解决方案 1.用jquery的trim()方法,$.trim(str)就可以了. 2.String扩展: 第一种 String.prototype.trim ...

  6. 记录遇到的IE8兼容性问题汇总

    1,伪元素:first-child不起作用,需要单独指定样式名称 2,透明度表示方法,尤其在函数中表示 @mixin opacity($value) { -webkit-opacity: $value ...

  7. 解决Easyui1.3.3 IE8兼容性问题

    事先声明:项目在Firefox和Chrome上完美运行,在MSIE9.MSIE10上基本没问题,但是放在MSIE8上面运行问题就出来了.登录系统后,系统页面跳动,导致系统无法使用:我使用的是Easyu ...

  8. ueditor ie8兼容性问题

    ie8情况下,在进入加载有uEditor编辑器页面时候,不显示工具栏,会提示ueditor 缺少对象或者出现错误   1.引用Ueditor的js 的时候用 绝对路径       网上搜出来的一种解决 ...

  9. IE8 兼容性总结

    rgba 颜色格式 IE8 不支持 rgba(0, 0, 0, .5) 这种颜色格式. 解决方案:可以利用一张半透明的 png 图片来兼容 IE8. flexbox 根据 caniuse 给出的数据, ...

  10. IE8兼容性调试及IE 8 css hack

    做网站开发,一提到IE,就会让人头大,有一肚子的牢骚要发:微软为什么不跟着国际标准走呢,总是独树一帜,搞出那么多问题来.IE的firebug调试工具也不太好用,尤其是低版本的IE,更是让人头疼. 最近 ...

随机推荐

  1. Python 装饰器初探

    Python 装饰器初探 在谈及Python的时候,装饰器一直就是道绕不过去的坎.面试的时候,也经常会被问及装饰器的相关知识.总感觉自己的理解很浅显,不够深刻.是时候做出改变,对Python的装饰器做 ...

  2. Servlet 中利用阿里云包fastjson-1.2.43.jar把map转为Json并返回前端

    1.引入fastjson-1.2.43.jar 包到lib下面,下载地址链接: https://pan.baidu.com/s/1EgAOikoG4VJRJrnUw83SNA  密码: n2fr im ...

  3. hdu1576逆元的一道水题

    hdu 1576 Problem Description 要求(A/B)%9973,但由于A很大,我们只给出n(n=A%9973)(我们给定的A必能被B整除,且gcd(B,9973) = 1).   ...

  4. 使用SecureCRT设置linux系统登录的ssh公钥认证

    1.修改ssh配置文件/etc/ssh/sshd_configRSAAuthentication yes                             //使用RSA加密算法PubkeyAu ...

  5. GYM - 101147 B.Street

    题意: 大矩形代表市场,大矩形当中有很多小矩形样式的伞.这些小矩形都贴着大矩形的左边或者右边且互不相交.小矩形以外的地方都是阳光.求经过大矩形时在阳光下的最短时间. 题解: 最短路的做法.起点和终点与 ...

  6. 叶落归根(hometown)

    叶落归根(hometown) 题目描述 叶落归根——树叶从树根生发出来,凋落后最终还是回到树根.比喻事物总有一定的归宿.接下来是题目. 给定一个n个点的有向图G(点的编号为1~n),一开始落叶(仅作为 ...

  7. Eclipse使用Maven内置插件不需要安装Maven

    首先修改eclipse项目中maven的路径,默认在C盘,修改路径例如 在d盘创建文件夹-D:- |---m2 |--repository |--setting.xml 没有文件夹和文件要自己新建,如 ...

  8. python和shell对比

    python和shell都是我们经常使用的脚本语言,平时python主要用来写一些小型的任务,shell则在使用liunx系统部署任务的时候用的比较多,由于两者有一些相似之处,时间长了容易混掉,所以这 ...

  9. bzoj 1690: [Usaco2007 Dec]奶牛的旅行——分数规划+spfa判负环

    Description 作为对奶牛们辛勤工作的回报,Farmer John决定带她们去附近的大城市玩一天.旅行的前夜,奶牛们在兴奋地讨论如何最好地享受这难得的闲暇. 很幸运地,奶牛们找到了一张详细的城 ...

  10. sql 取一张表的全部外键

    select a.name as 约束名, object_name(b.parent_object_id) as 外键表, d.name as 外键列, object_name(b.reference ...