google chrome浏览器页签的css实现

Google Chrome浏览器的页签比较特别的是激活页签能“吃”掉旁边非激活页签的一部分。这对css提出了一些挑战。如下图：

当然，要求是只能使用两张图，宽度自适应，用到的图：
正常页签背景：
激活页签背景：。
代码：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> <! DOCTYPE HTML >
< head >
     < title > google chrome tab </ title >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< style  type ="text/css" >
     /* simple reset */
    * { padding : 0px ; margin : 0px ; }
     /* clearfix */
    .clearfix:after  { content :  "." ; display :  block ; height :  0 ; clear :  both ; visibility :  hidden ; }
    .clearfix  { display :  inline-block ; }    /*  for IE/Mac  */

    
    #tab  {  font-size : 12px ; padding-left : 20px ; } /* 由于li有margin-left:-15px;所以tab的padding-left>15px; */
    #tab  li { float : left ;  display : block ;  height : 26px ; position : relative ; margin-left : -15px ;  z-index : 1 ; } /* margin-left:-15px; 让当前元素“缩进”到前一个元素的右侧 */
    #tab  li a { color : #000 ;  text-decoration : none ;  display : block ;  height : 26px ; padding-left : 30px ; padding-right : 15px ;  line-height : 26px ; margin-right : 15px ;  background : url(normal.gif) no-repeat left top ; }
     /* i置于右边 */
    #tab li i { position : absolute ;  right : 0px ; top : 0px ;  width : 15px ; height : 26px ;  z-index : 3 ; background : url(normal.gif) no-repeat right top ; }

    #tab  .active { z-index : 2 ; top : 1px ;   } /* 当前激活的li在非激活之上(z-index) */
    #tab  .active a { background : url(active.gif) no-repeat left top ;   }
    #tab  .active i { background : url(active.gif) no-repeat -197px top ; }
    .content { border : solid 1px #bcc5d1 ; }
</ style >
</ head >
< body >
< ul  id ="tab"  class ="clearfix" >
     < li >< a  href ="###" > 页签1 </ a >< i ></ i ></ li >
     < li  class ="active" >< a  href ="###" > 页签页签页签页签2 </ a >< i ></ i ></ li >
     < li >< a  href ="###" > 页签3 </ a >< i ></ i ></ li >
</ ul >
< div  id =""  class ="content" >
    content
</ div >
< script  type ="text/javascript" >
     // 添加事件
      var  addHandler  =  window.addEventListener ?
     function (elem,event,handler){elem.addEventListener(event,handler, false );}:
     function (elem,event,handler){elem.attachEvent( " on " + event,handler);};

     // 实现.active切换
    addHandler(window, " load " , function (){
         var  arrLi  =  document.getElementById( " tab " ).getElementsByTagName( " li " );
         for  ( var  i = 0 ,l = arrLi.length;i < l ;i ++  ){
            ( function (index){
                addHandler(arrLi[index], " click " , function (e){
                     var  evt  =  (window.event || e),cur = evt.target || evt.srcElement;
                    
                     for  ( var  j = 0 ,jl = arrLi.length;j < jl ;j ++  ){
                        arrLi[j].className = "" ;
                    }
                    ((cur.tagName.toLowerCase() == " a " ) ? cur.parentNode:cur).className = " active " ;
                     try {cur.blur();cur.parentNode.blur();} catch (e){}
                });
            })(i);
        }
    });
</ script >
<!--  ie 6 png 不透明  -->
<!-- [if IE 6]>
<script type="text/javascript" src="http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>
  DD_belatedPNG.fix('.pngfix');
</script>
<![endif] -->
</ body >
</ html >