Passwords showing up as white (or not at all) in I

2020-02-26 00:08发布

问题:

For some reason password fields are appearing as blank (or white) characters in IE8 for a site I'm working on.

Both these screenshots have a long password entered. The second one I have highlighted it so you can see it recognizes the characters, they just appear as empty. I also included the IE debug trace.

Full size - http://i.stack.imgur.com/hUd4I.png

Full size - http://i.stack.imgur.com/tOkn9.png

In other browsers they show up fine. I have never seen anything like this before, any ideas?

HTML header:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Only custom CSS for inputs:

body, input, button, select, textarea {
    font-family: 'Open Sans' , sans-serif;
    font-size: 13px;
}

回答1:

I had the same issue. I fixed it by adding a hack in my CSS to override the input font from Open Sans to Arial:

.form-horizontal input {
    *background-color: #ffffff !important;
    *color: #464646 !important;
    *font-family: Arial !important;
}

It has to be a character issue with Google Font and IE where the password dots are missing from the font or something like that.



回答2:

This is how I solved it

<?php echo Form::password('password', NULL, array('title'=>'', 'class' => 'input-block-level', 'tabindex' => '2', 'placeholder'=>'Password', 'title' => 'Password', 'style' => 'font-family:arial, serif;')) ?><!-- the font family arial serif is a fix for IE8 password placeholder text -->


回答3:

I had a similar problem - my text on all input[type='text'] elements was white. Moving the mouse cursor out of the modal div caused the text to appear. I suspected filter and transition CSS rules from Twitter Bootstrap to cause the problem - and it was it. I removed hide and fade classes from my modal window: <div class="modal hide fade" /> and it works fine now. Give it a try if your modal is animated.