一个问题，很困惑。
直接上代码
- HTML code
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> *{margin:0; padding:0;} .ol-float *{margin:0; padding:0;font-size:12px;} .ol-float a {text-decoration:none;} .ol-float a:hover {text-decoration:none;} .ol-float { position:absolute; top:100px; right:1px; border:1px solid #F7A51A; border-top-width:2px; z-index:9999; } .ol-float-r { position:relative; width:0px; height:198px; overflow:hidden; } .ol-float-close { float:right; margin:5px 2px 0 0; padding:0 1px; border:1px solid #fff;; cursor:pointer; font-size:12px; color:#F7A51A; font-weight:bold; } .ol-float-close-hover { border:1px solid #F7A51A; } .ol-float-head { height:28px; background:#eee; } .ol-float-bottom { height:66px; background:#eee; } .ol-float-con { width:183px; overflow:hidden; zoom:1; } .ol-float-con a { float:left; width:88px; height:24px; line-height:24px; border:1px solid #fff; border-bottom-color:#f7f7f7; text-align:center; color:#000; } .ol-float-con a span { margin-right:4px; color:#ffbb69; } .ol-float-con a:hover { color:red; border:1px solid #fed9ab; background:#fff9ec; } .ol-float-trigger { position:absolute; left:-28px; top:-19px; width:28px; height:103px; background:#ddd; cursor:pointer; } </style> </head> <body> <div class="ol-float" id="ol-float"> <div class="ol-float-trigger" id="ol-float-trigger"> 点<br/>击<br/>我 </div> <div class="ol-float-r" id="ol-float-r"> <div class="ol-float-head"> <div class="ol-float-close" title="关闭" id="ol-float-close">×</div> </div> <div class="ol-float-con"> <a href="#"><span>回呼</span>咨询咨询</a> <a href="#"><span>回呼</span>咨询咨询</a> <a href="#"><span>回呼</span>咨询咨询</a> <a href="#"><span>回呼</span>咨询咨询</a> <a href="#"><span>回呼</span>咨询咨询</a> <a href="#"><span>回呼</span>咨询咨询</a> <a href="#"><span>回呼</span>咨询咨询</a> <a href="#"><span>回呼</span>咨询咨询</a> </div> <div class="ol-float-bottom"></div> </div> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $('#ol-float-trigger').click(function(){ $('#ol-float-r').width() ? ($('#ol-float-r').animate({ width: 0 })) : ($('#ol-float-r').animate({ width: '183px' })); return false; }) $('#ol-float-close').click(function(){ $('#ol-float-r').animate({ width: 0 }) return false; }).mouseover(function(){ $(this).addClass('ol-float-close-hover'); }).mouseout(function(){ $(this).removeClass('ol-float-close-hover'); }) // 这里不知道为什么明明没移出 #ol-float，方框却缩回去了。 $('#ol-float').mouseout(function(){ $('#ol-float-r').animate({ width: 0 }) }) </script> </body></html>
[解决办法]
其实Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。
_zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例，但这里
overflow:hidden;和_zoom:1;是连起来用的，作用是清除border内部浮动。