tabView的实现问题

实现效果图：

 

 

我的代码：

 

  
    

   
     
   
      1 
   
     <
   
     style 
   
     type
   
     ="text/css"
   
     >
   
     

   
      2 
   
      .tab 

   
      3 
   
      
   
     {
   
     

   
      4 
   
      border
   
     :
   
      solid 1px #CCC
   
     ;
   
     

   
      5 
   
      width
   
     :
   
      110px
   
     ;
   
     

   
      6 
   
      height
   
     :
   
      26px
   
     ;
   
     

   
      7 
   
      display
   
     :
   
      block
   
     ;
   
     

   
      8 
   
      float
   
     :
   
      left
   
     ;
   
     

   
      9 
   
      padding-top
   
     :
   
      6px
   
     ;
   
     

   
     10 
   
      margin-right
   
     :
   
      3px
   
     ;
   
     

   
     11 
   
      text-align
   
     :
   
      center
   
     ;
   
     

   
     12 
   
      
   
     }
   
     

   
     13 
   
      .content 

   
     14 
   
      
   
     {
   
     

   
     15 
   
      clear
   
     :
   
      left
   
     ;
   
     

   
     16 
   
      border
   
     :
   
      solid 1px #ccc
   
     ;
   
     

   
     17 
   
      border-top
   
     :
   
      solid 6px blue
   
     ;
   
     

   
     18 
   
      vertical-align
   
     :
   
      middle
   
     ;
   
     

   
     19 
   
      padding-left
   
     :
   
      7px
   
     ;
   
     

   
     20 
   
      padding-top
   
     :
   
      20px
   
     ;
   
     

   
     21 
   
      width
   
     :
   
      450px
   
     ;
   
     

   
     22 
   
      height
   
     :
   
      40px
   
     ;
   
     

   
     23 
   
      
   
     }
   
     

   
     24 
   
      span:hover 

   
     25 
   
      
   
     {
   
     

   
     26 
   
      border-bottom-color
   
     :
   
      Blue
   
     ;
   
     

   
     27 
   
      background-color
   
     :
   
      Blue
   
     ;
   
     

   
     28 
   
      color
   
     :
   
      White
   
     ;
   
     

   
     29 
   
      
   
     }
   
     

   
     30 
   
      #one 

   
     31 
   
      
   
     {
   
     

   
     32 
   
      background-color
   
     :
   
      Blue
   
     ;
   
     

   
     33 
   
      color
   
     :
   
      White
   
     ;
   
     

   
     34 
   
      border
   
     :
   
      solid 1px #000
   
     ;
   
     

   
     35 
   
      border-bottom-color
   
     :
   
      Blue
   
     ;
   
     

   
     36 
   
      
   
     }
   
     

   
     37 
   
      
   
     </
   
     style
   
     >
   
     

   
     38 
   
      
   
     </
   
     head
   
     >
   
     

   
     39 
   
      
   
     <
   
     body
   
     >
   
     

   
     40 
   
      
   
     <
   
     span 
   
     class
   
     ="tab"
   
      id
   
     ="one"
   
     >
   
     Tab One Label
   
     </
   
     span
   
     >
   
     

   
     41 
   
      
   
     <
   
     span 
   
     class
   
     ="tab"
   
      id
   
     ="two"
   
     >
   
     Tab Two Label
   
     </
   
     span
   
     >
   
     

   
     42 
   
      
   
     <
   
     span 
   
     class
   
     ="tab"
   
      id
   
     ="three"
   
     >
   
     Tab Three Label
   
     </
   
     span
   
     >
   
     

   
     43 
   
      
   
     <
   
     div 
   
     class
   
     ="content"
   
      id
   
     ="content"
   
     >
   
     Tab One Content
   
     </
   
     div
   
     >
   
     

   
     44 
   
      
   
     </
   
     body
   
     >
  
    

 

测试环境 ： IE8

 

问题1：左边线条没对齐。

问题2：mouseover后面的tab时，第一个tab无法变成 白底黑字

其他问题