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

StackOverflow https://stackoverflow.com/questions/1801435

题

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

任何帮助都将不胜感激。

有帮助吗？

解决方案

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

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

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

其他提示

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

我建议你做一个快速的<！>放大器;脏修复 - 通过向<body>添加onload来运行$('#prompt_output').text(' ')，只是为了设置一切。 当你有时间探索IE6 / 7错误时，我建议你尝试更改布局，因为我认为IE不知道如何正确解释你的CSS。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top