IE7 does not center inline input inside absolutely positioned form
The page experiences a peculiar failure when running in IE7 (strictly IE8 in Compatibility View). A similar error occurs in IE6 when I use XP mode (along with a few other errors), but I'm not too worried about IE6 compatibility.
Namely, the input box is left-aligned when it should be centred as an inline element. Relevant CSS:
form#prompt {
position: absolute;
height: 300px;
width: 600px;
margin: -150px 0 0 -300px;
top: 50%;
left: 50%;
text-align: center;
}
input#password {
margin: 10px auto;
padding: 5px 10px开发者_开发百科;
text-align: center;
width: 398px;
display: inline;
}
Relevant HTML:
<form id="prompt">
<input type="text" name="password" id="password" />
</form>
Now the really peculiar thing is that when you trigger the submit listener on the form, which returns false and initializes the callback $('#prompt_output').text(' ').css('opacity',0).text('Access granted. Loading...').fadeTo(200,1);, everything works. The input rights itself. In fact, even when the callback is just $('#prompt_output').text(' '), it works. Just selecting the element $('#prompt_output'); doesn't do anything.
Any help would be appreciated.
Without drastically changing the CSS/markup I think this solves the problem in ie7 (not tested in ie6).
Try wrapping the label around the input - I have no idea why it works and I have only tested in ie7, ie8 and firefox but it seems to do the trick.
<label for="password" class="instruction">
Access restricted: enter password
<br>
<input name="password" id="password" type="text">
</label>
I've run your page through an emulator and this is obviously an IE7 and previous versions problem. It works on FF and on IE8. But I think you already know that.
I suggest you do a quick & dirty fix - by adding onload to the <body> that will run $('#prompt_output').text(' '), just to set things straight.
When you have the time to explore IE6/7 bugs, I suggest you try and change the layout, since I think IE doesn't know how to interpret your CSS properly.
加载中,请稍侯......
精彩评论