CSS3过渡效果 兼容IE6、IE7、IE8

<style>
    .box{
        width:120px;height:40px;background:yellowgreen;line-height:40px;transition:width 1s;cursor:pointer;
    }
   .box:hover{
        width:180px;
    }
</style>

<div class="box">Hello World</div>

 <!--[if lte IE 8]>
        <style>
            .box:hover{
                width:100px\9;
            }
        </style>
        <script>
            $(function(){
                $(".box").hover(function(){
                    $(this).animate({width:180},500)
                },function(){
                    $(this).animate({width:120},500)
                });
            });
        </script>
   <![endif]-->

该过渡效果兼容各个浏览器，比如IE5，IE6，IE7，IE8等。