老生常谈IE兼容性：ie6 javascript:void(0)、IE7 input透明、IE8 jquery动态加载css

待我称王封你为后i 2022-09-18 13:56 180阅读 0赞

这年头依旧有人坚守IE6阵营，为什么呢？人家客户说单位以前系统必须用IE6没办法升级，这理由还真充分！

一、IE6 对javascript:void(0)的支持

问题：<a href=”javaScript:void(0)” onclick=”doSomething();”>click me</a>，发现点击事件不起作用。原因是和IE6的事件冒泡处理方法有关，网上一大堆讨论。

其实以前遇到过，以前是在onclick事件加上return false;这次发现另一解决办法。

解决办法：

1、改为<a href=”javaScript:void(0)” onclick=”doSomething();return false;”>click me</a>

2、改为<a href=”\#” onclick=”doSomething();”>click me</a>，但会致使页面跳转到顶端，不推荐。

3、改为<a href=”\#\#\#” onclick=”doSomething();”>click me</a>

二、IE7 input设置背景色为透明、且父节点position:absolute;时，无法点击得到焦点

问题：<div id="input" style='position:absolute;.....'><input type="text" id="account" placeholder="账号" style='background-color:transparent;' /></div>

真是无语，IE6都正常唯IE7存在此问题

解决办法：

1、父节点不使用绝对定位改为浮动，如<div id="input" style='foat:left;.....'>

2、input加上背景色<input type="text" id="account" placeholder="账号" style='background-color:\#fff' />

3、input加上背景图，指向一个全透明的图片<input type="text" id="account" placeholder="账号" style='background-image:url(images/empty.gif)' />

三、IE8用jquery动态加载css

问题：jquery版本1.10.2，使用$("<link>").attr(\{ rel: "stylesheet",type: "text/css",href: "site.css"\}).appendTo("head");加载css，IE9+、Chrome都正常，测试到IE8就不行了，网上有人说IE8可IE6、7不行，可能与jquery版本有关。

解决办法：用传统的方式document.createElement...head.appendChild...代码不附，网上大把。

四、RGBA的低版本实现办法

这纯属意见发现，记录一下。IE各版本对rgba的支持见

<table style="border-collapse:collapse; border:1px solid rgb(204,204,204); color:rgb(73,73,73); font-family:verdana,Tahoma,Arial,'Microsoft YaHei',SimSun,sans-serif; font-size:12px; line-height:24px"> 
 <thead> 
  <tr> 
   <th style="padding:0px 1em 0px 4px; border-width:1px 1px 2px; border-style:solid; border-color:rgb(204,204,204); background-color:rgb(0,204,255)"> 类型</th> 
   <th style="padding:0px 1em 0px 4px; border-width:1px 1px 2px; border-style:solid; border-color:rgb(204,204,204); background-color:rgb(0,204,255)"> Internet Explorer</th> 
   <th style="padding:0px 1em 0px 4px; border-width:1px 1px 2px; border-style:solid; border-color:rgb(204,204,204); background-color:rgb(0,204,255)"> Firefox</th> 
   <th style="padding:0px 1em 0px 4px; border-width:1px 1px 2px; border-style:solid; border-color:rgb(204,204,204); background-color:rgb(0,204,255)"> Chrome</th> 
   <th style="padding:0px 1em 0px 4px; border-width:1px 1px 2px; border-style:solid; border-color:rgb(204,204,204); background-color:rgb(0,204,255)"> Opera</th> 
   <th style="padding:0px 1em 0px 4px; border-width:1px 1px 2px; border-style:solid; border-color:rgb(204,204,204); background-color:rgb(0,204,255)"> Safari</th> 
  </tr> 
 </thead> 
 <tbody style="border:0px"> 
  <tr> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221)"> 版本</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(255,255,204)"> (×)IE6</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> (√)Firefox 3.0.10</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> (√)Chrome 2.0.x</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> (√)Opera 9.64</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> (√)Safari 4</td> 
  </tr> 
  <tr> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(255,255,204)"> (×)IE7</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> &nbsp;</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> &nbsp;</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> &nbsp;</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> &nbsp;</td> 
  </tr> 
  <tr> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(255,255,204)"> (×)IE8</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> &nbsp;</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> &nbsp;</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> &nbsp;</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> &nbsp;</td> 
  </tr> 
  <tr> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> (√)IE9</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> &nbsp;</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> &nbsp;</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> &nbsp;</td> 
   <td style="padding:0px 4px; border:1px dotted rgb(221,221,221); background-color:rgb(0,255,255)"> &nbsp;</td> 
  </tr> 
 </tbody> 
</table>

IE家族只有9以后的版本支持该属性；

解决办法：IE6-8用滤镜实现filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\#BF000000,endColorstr=\#BF000000);