IE7不会在绝对定位的形式中居中输入

时间:2009-11-26 03:47:00

标签: jquery html css layout internet-explorer-7

在IE7中运行时,页面遇到特殊故障(严格来说,在兼容性视图中是IE8)。当我使用XP模式(以及其他一些错误)时,IE6中会出现类似的错误,但我并不太担心IE6的兼容性。

即,当输入框应该作为内联元素居中时,它是左对齐的。相关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; 
}

相关HTML:

<form id="prompt">
    <input type="text" name="password" id="password" />
</form>

现在真正奇怪的是,当你在窗体上触发提交监听器,返回false并初始化回调$('#prompt_output').text(' ').css('opacity',0).text('Access granted. Loading...').fadeTo(200,1);时,一切正常。输入权利本身。事实上,即使回调只是$('#prompt_output').text(' '),它也可以。只选择元素$('#prompt_output');不会做任何事情。

任何帮助都将不胜感激。

2 个答案:

答案 0 :(得分:1)

如果没有彻底改变CSS /标记,我认为这解决了ie7中的问题(未在ie6中测试)。

尝试在输入周围包装标签 - 我不知道它为什么会起作用,我只在ie7,ie8和firefox中测试过,但它似乎可以解决这个问题。

<label for="password" class="instruction">
    Access restricted: enter password
   <br>
   <input name="password" id="password" type="text">
</label>

答案 1 :(得分:0)

我通过an emulator运行您的页面,这显然是IE7和以前的版本问题。它适用于FF和IE8。但我想你已经知道了。

我建议你做一个快速的&amp;脏修复 - 将onload添加到将运行<body>的{​​{1}},以便直接设置。 当你有时间探索IE6 / 7错误时,我建议你尝试更改布局,因为我认为IE不知道如何正确解释你的CSS。