首页 > 技术文章 > 关于IE的几个兼容

hanbingljw 2014-09-04 18:09 原文

1.display:inline-block

这个熟悉比较常用,但是IE浏览器的兼容就不好,

IE浏览的兼容办法:*display:inline; zoom:1;

2.margin:0 auto;

水平居中,单在IE中无效,

兼容方法:需要在居中的层的父类中加上

*text-align:center;

3.让IE兼容HTML5

<!-–[if lt IE 9]><script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js "></script ><![endif]–- > 
但要用,都要初始化新标签的CSS,因为HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局
在css里面添加:
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

但是如果ie6/7/8 禁用脚本的用户,可以参照facebook的做法,即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面,用 html4 标签替换 html5 标签,
<!--[if lte IE 8]>
<noscript>
<style>.html5-wrappers{display:none!important;}</style>
<div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
</div>
</noscript>
<![endif]-->


html5shiv官方网址:http://code.google.com/p/html5shiv/
参考:http://www.jb51.net/html5/22826.html ; http://www.codefans.net/articles/324.shtml

4.IE兼容 css3属性等

前提:下载ie-css3.htc

用法:在用的css3的规则里面添加

behavior: url(ie-css3.htc);
  1. 当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
  2. z-index值一定要比周围元素的要高
  3. border-radius 为元素四个角设置圆角属性
    元素边框
    只设置一个角落的圆角属性
    box-shadow 模糊大小参数
    偏移值
    不支持除了黑色(#000)以外的其他颜色
    text-shadow 模糊大小参数
    偏移值
    颜色值

    IE下的表现与Firefox/Safari/Chrome有一点点的差异,原因不详

推荐阅读