解决input设置背景后，在ie7下浏览内容过长背景跟着滚动

先发发牢骚，万恶的IE啊。这么点问题害我走弯路，浪费时间，浪费生命。本以为加上background-attachment:fixed;问题就没了，结果问题依然存在，查资料说好像是ie bug。无语，天杀的IE，谁叫人家IE是老大呢，还得想办法啊。

方法一：此法也是最简单的，那就是设定可输入长度。不过觉得有点旁门左道。

View Code

   
     

    
       1 
    
      <!
    
      DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    
      >
    
      

    
       2 
    
       
    
      <
    
      html 
    
      xmlns
    
      ="http://www.w3.org/1999/xhtml"
    
      >
    
      

    
       3 
    
       
    
      <
    
      head
    
      >
    
      

    
       4 
    
       
    
      <
    
      meta 
    
      http-equiv
    
      ="Content-Type"
    
       content
    
      ="text/html; charset=utf-8"
    
      >
    
      

    
       5 
    
       
    
      <
    
      title
    
      >
    
      test
    
      </
    
      title
    
      >
    
      

    
       6 
    
       
    
      <
    
      style 
    
      type
    
      ='text/css'
    
      >
    
      

    
       7 
    
       input
    
      {
    
      

    
       8 
    
       background
    
      :
    
      url(images/login_usr.gif) no-repeat
    
      ;
    
      

    
       9 
    
       border
    
      :
    
      none
    
      ;
    
      

    
      10 
    
       width
    
      :
    
      186px
    
      ;
    
      

    
      11 
    
       height
    
      :
    
      26px
    
      ;
    
      

    
      12 
    
       line-height
    
      :
    
      26px
    
      ;
    
      

    
      13 
    
       padding
    
      :
    
      0 20px
    
      ;
    
      

    
      14 
    
       
    
      }
    
      

    
      15 
    
       
    
      </
    
      style
    
      >
    
      

    
      16 
    
       
    
      </
    
      head
    
      >
    
      

    
      17 
    
       
    
      <
    
      body
    
      >
    
      

    
      18 
    
       
    
      <
    
      div 
    
      id
    
      ='main'
    
      >
    
      

    
      19 
    
       
    
      <
    
      input 
    
      type
    
      ='text' 
    
      id
    
      ='usr' 
    
      maxlength
    
      ="20"
    
      />
    
      

    
      20 
    
       
    
      </
    
      div
    
      >
    
      

    
      21 
    
       
    
      </
    
      body
    
      >
    
      

    
      22 
    
       
    
      </
    
      html
    
      >
   
     

方法二：将背景设置到父元素,再具体设置input css样式

View Code

    
      

     
        1 
     
       <!
     
       DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
     
       >
     
       

     
        2 
     
        
     
       <
     
       html 
     
       xmlns
     
       ="http://www.w3.org/1999/xhtml"
     
       >
     
       

     
        3 
     
        
     
       <
     
       head
     
       >
     
       

     
        4 
     
        
     
       <
     
       meta 
     
       http-equiv
     
       ="Content-Type"
     
        content
     
       ="text/html; charset=utf-8"
     
       >
     
       

     
        5 
     
        
     
       <
     
       title
     
       >
     
       test
     
       </
     
       title
     
       >
     
       

     
        6 
     
        
     
       <
     
       style 
     
       type
     
       ='text/css'
     
       >
     
       

     
        7 
     
        #main
     
       {
     
       

     
        8 
     
        background
     
       :
     
       url(images/login_usr.gif) no-repeat
     
       ;
     
       

     
        9 
     
        width
     
       :
     
       226px
     
       ;
     
       

     
       10 
     
        height
     
       :
     
       26px
     
       ;
     
       

     
       11 
     
        line-height
     
       :
     
       26px
     
       ;
     
       

     
       12 
     
        
     
       }
     
       

     
       13 
     
        input
     
       {
     
       

     
       14 
     
        width
     
       :
     
       204px
     
       ;
     
       

     
       15 
     
        margin-left
     
       :
     
       20px
     
       ;
     
       

     
       16 
     
        height
     
       :
     
       22px
     
       ;
     
       

     
       17 
     
        line-height
     
       :
     
       22px
     
       ;
     
       

     
       18 
     
        border
     
       :
     
       0
     
       ;
     
       

     
       19 
     
        
     
       }
     
       

     
       20 
     
       
     
       </
     
       style
     
       >
     
       

     
       21 
     
       
     
       </
     
       head
     
       >
     
       

     
       22 
     
       
     
       <
     
       body
     
       >
     
       

     
       23 
     
        
     
       <
     
       div 
     
       id
     
       ='main'
     
       >
     
       

     
       24 
     
        
     
       <
     
       input 
     
       type
     
       ='text'
     
       />
     
       

     
       25 
     
        
     
       </
     
       div
     
       >
     
       

     
       26 
     
       
     
       </
     
       body
     
       >
     
       

     
       27 
     
       
     
       </
     
       html
     
       >
    
      

方法：用img or div(加背景）通过position定位。此法没有做，只是个思路，也应该能实现，不过兼容性是个问题。又得hack。

ps:以上测试浏览器ie7/8、firefox、chrome、opera、safari。机器上没有ie6所以没测。