关于判断ie版本的一段js代码


ie = (function() {
var v = 3, div = document.createElement('div'), a = div.all || [];
while (div.innerHTML = '<!--[if gt IE '+(++v)+']><br><![endif]-->', a[0]);
return v > 4 ? v : !v;
}());

这个不同于其他用ua判断浏览器版本的方法。
div.all
all方法只有ie支持。
再利用注释的兼容性方法来判断当前是哪款ie浏览器。

让IE也支持圆角

转载自:http://cll.socss.cn/archives/259

css3的圆角属性,能为开发者提高开发的效率。可惜主流的ie6 7 8并不支持该属性。下面介绍一种让ie也支持圆角的方法。

1.首先要下载一个压缩包,里面有一个微软的脚本文件(11KB),里面是IE利用VML矢量可标记语言作为画笔绘出圆角。

下载地址:http://cll.socss.cn/wp-content/uploads/2011/07/iecss3.zip

使用方法:

.main{

border: 2px solid #C0C0C0;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

position:relative;

z-index:2;

behavior: url(此处为ie-css3.htc文件的绝对路径);

Webkit内核的浏览器支持“-webkit-border-radius:  10px;”属性(10px是圆角半径),可以直接解析出圆角;Firefox浏览器支持“-moz-border-radius:  10px;”属性,也是可以直接解析出圆角;IE系浏览器则需要加上“border-radius: 10px;”的属性。

 

需要注意以下几点:

1、behavior的url里一定要填写ie-css3.htc的绝对路径,因为  IE浏览器找该文件是相对当前html文件路径来找的。

2、一定要有定位属性:position:relative;

3、因为在IE浏览器下这些css3效果的实现是要借助于VML,由VML绘制圆角或是投影效果,所以还需要一个z-index属性。z-index属性最好设置得比较大,如2。

4、如果在IE浏览器下某些模块无法用此渲染,可以试着绝对定位相应的层,即加上“ width: 400px; height:400px;”属性。

ps:因为该方法使用脚本来实现的,实际应用过程中可能会出现很多意想不到的问题,所以在正式商业项目中还是慎用的好。

 

我的使用经验:这个外部文件实际上就是一套js,会根据你的使用情况往页面上加一些代码来辅助实现你需要的效果。

这些代码主要是一个层,有行内样式,是根据你圆角对象相对屏幕的定位而产生的,那么就出现个问题~

如果你的对象的父级有position属性,但是又不在页面原点(0,0),就会产生错位问题,这个要注意一下。

当然你也可以自己去修改ie-css3.htc这个文件里面的js来达到你想要的效果。

 

IE6,IE7下图片缩放失真解决方法

  1. 通过加载微软urn:schemas-microsoft-com:vml命名空间中的VML技术来实现失真的处理,看下面代码。
  2. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  3. <!–[if IE 6]>
  4. <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
  5. <![endif]–>
  6. <htmlxmlns=”http://www.w3.org/1999/xhtml”>
  7. <metahttp-equiv=”Content-Type”content=”text/html; charset=utf-8″/>
  8. <head>
  9. <title>VML</title>
  10. <!–[if IE 6]>
  11. <style type=”text/css”>
  12. .vml{ behavior: url(#default#VML);}
  13. .iefix {display:none!important;}
  14. </style>
  15. <![endif]–>
  16. <styletype=”text/css”>
  17. img.iefix {-ms-interpolation-mode: bicubic;}
  18. </style>
  19. </head>
  20. <body>
  21. <!–[if IE 6]>
  22. <v:image src=”1.jpg” class=”vml” style=”width:500px;height:400px;display:block” />
  23. <![endif]–>
  24. <imgsrc=”1.jpg”class=”iefix”style=”width:500px;height:400px;display:block”/>
  25. </body>
  26. </html>

IE8的css hack

ie独有的hack的方式,让我感到人生都通透了。

ie8的hack方式是后面加数字9,看下面代码。

.hackTest{
color:#000000;
color:#0000FF9;       /* 所有IE浏览器(ie6+)支持*/
[color:#000000;color:#00FF00;      /* webkit支持 */
*color:#FFFF00;                 /* IE7支持 */
_color:#FF0000;               /* IE6支持 */
}