IE7 不在绝对定位表单内居中内联输入答案

【问题标题】：IE7 does not center inline input inside absolutely positioned formIE7 不在绝对定位表单内居中内联输入
【发布时间】：2016-06-15 02:13:27
【问题描述】：

页面在 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'); 不会做任何事情。

任何帮助将不胜感激。

【问题讨论】：

那个链接需要密码
可接受的密码是password，但为了我的描述，您可以输入任何内容来触发表单提交侦听器。

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

【解决方案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>

【讨论】：

虽然将input 标签作为label 的子标签几乎肯定不是标准的，但此修复似乎在IE7 和IE6 中有效。
其实我认为包装输入是完全有效的。虽然不确定
。

【解决方案2】：

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

我建议你做一个快速而肮脏的修复 - 通过将 onload 添加到将运行 $('#prompt_output').text(' ') 的 <body>，只是为了让事情变得简单。当您有时间探索 IE6/7 的错误时，我建议您尝试更改布局，因为我认为 IE 不知道如何正确解释您的 CSS。

【讨论】：