苹果浏览器CSS一个奇怪的BUG

这几天做项目时遇到一个奇怪的问题，原本写了一个兼容IE6 input type选择器的CSS，如下

 

/*IE6 input type选择器兼容*/

 

*html input{zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));}

/*定义div标签高度自增*/

.divHA{ position:relative;min-height: 10px; overflow: hidden; _height: 10px;  _overflow-y: visible; }

.divHA2{border:1px solid red;}

 

 

测试一切正常，包括ie6/7/8 ff ，但最后用苹果safari 4测试时发现一个奇怪的问题，就是他下面的的定义.divHA不起作用了，但再下面的divHA2起作用的，经反复测试发现只要CSS定义为如下expression格式，就会引起这个问题

 

{zoom: expression(function(ele){()});}

但当设置成如下时，又正常了：

input{zoom: expression(function(ele){});}

经测试有些格式会引起这个问题，还没有找到规律，似乎和括号有关，因此得针对每个使用了expressioin表达式的地方进行测试修改，比如上面这句改为如下就正常了：

 

*html input{zoom: expression(function(ele){ele.className?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));}

 

或者用如下方式兼容，接紧着定义一个无关紧要的表达式

*html input{zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));}

.s{}

.divHA{ position:relative;min-height: 10px; overflow: hidden; _height: 10px;  _overflow-y: visible; }