Textfield trong di chuột không hoạt động bình thường trong IE

Question

Tôi đang gặp sự cố khi phát triển trong IE, tôi đã tạo tiêu đề tuyệt vời, nhưng bây giờ tôi đã kiểm tra mọi thứ trong Internet Explorer và tôi đã tìm thấy một vài lỗi,

Một là sau đây, tôi chưa bao giờ có một cái gì đó như thế này, đó là lý do tại sao tôi thực sự bị ám ảnh bởi vấn đề này. Tôi thậm chí không chắc chắn nếu có ai biết làm thế nào để sửa lỗi này, chấp nhận thách thức!

Tôi biết trình giữ chỗ DOESNT hoạt động trong IE, nhưng điều đó rõ ràng không phải là vấn đề. Nếu bạn đang ở trong di chuột, và bạn đang đi qua trường văn bản, hộp biến mất, và bạn cần phải đi qua nó một lần nữa.

Dưới đây một số mã:

<ul> 
    <div class="transparant"> 
     <div class="dropbox"> 
      <div class="login"> 
       <div class="textfield"> 
        <form method="post"> 
         <input id="textfield_post" type="text" name="username" placeholder="Gebruikersnaam" class="matrix"/>  
       </div> 
      </div> 

      <div class="pass"> 
       <div class="textfield"> 
        <input id="textfield_post" type="password" name="password" placeholder="Wachtwoord" class="matrix"/> 
       </div> 
      </div> 

      <div class="loginbutton"> 
       <input type="submit" class="btn" value= "Login" type="button" id="login_button"></form> 
      </div> 

      <div class="forgotpass"> 
       <a href="#" onclick="NewPassword()">Forgot password?</A> 
      </div> 
     </div> 
    </div> 
    </div> 
</ul> 

Tôi nghĩ rằng đó là vì sự z-index. Ngoài ra, tôi không muốn sử dụng jquery hoặc bất cứ điều gì, tôi chỉ muốn sửa chữa vấn đề bằng cách sử dụng đúng HTML & CSS.

Tôi đang hỏi bạn nếu có ai quen thuộc với vấn đề này,

Trang web này: (nó chỉ vào trình duyệt IE 7 & 8)

Cảm ơn bạn đọc;)

Answer 1

Khi bạn làm sạch textbox khi vấn đề được giải quyết. Tôi không biết nếu bạn chấp nhận công việc đó xung quanh nhưng hey, nó hoạt động :)

Answer 2

Tôi đoán bạn đã sử dụng :hover CSS hoặc mouseover() JQuery để làm cho hộp xuất hiện. Tôi đề nghị để sử dụng mouseentered() kiểm tra liên kết sau:

http://www.mkyong.com/jquery/different-between-mouseover-and-mouseenter-in-jquery/

và chắc chắn làm cho ul overflow:hidden

Answer 3

IE hiện tại Không hỗ trợ Placeholder .i khuyên bạn nên di chuyển với JQuery. đây là mẫu mã

<p><script type="text/javascript"> 
    $(function() { 
     if (!$.support.placeholder) { 
      var active = document.activeElement; 
      $(':text').focus(function() { 
       if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) { 
        $(this).val('').removeClass('hasPlaceholder'); 
       } 
      }).blur(function() { 
       if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) { 
        $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder'); 
       } 
      }); 
      $(':text').blur(); 
      $(active).focus(); 
     } 
    }); 
</script> 
</p> 

Hy vọng nó giúp