关于IE的几个兼容
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);
- 当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
- z-index值一定要比周围元素的要高
-
border-radius 为元素四个角设置圆角属性
元素边框只设置一个角落的圆角属性 box-shadow 模糊大小参数
偏移值不支持除了黑色(#000)以外的其他颜色 text-shadow 模糊大小参数
偏移值
颜色值IE下的表现与Firefox/Safari/Chrome有一点点的差异,原因不详