css - IE9中的表单输入框和标签对齐方式

Question

我正在重新设计用户信息表单的外观和布局。最初它是使用表格完成的，但我真的不想使用表格进行布局。我的代码在这里http://jsfiddle.net/Chris22/eNqrM/ 我已经在所有浏览器、Opera 11.x、FF 12.x、Chrome 18.x、Safari 5.1.x 中测试了我的代码，并且表单看起来很棒. 我的问题是IE9。

请看一下 IE9 中的代码，看看是否有人能弄清楚我的错误编码是什么，为什么表单元素没有对齐并且有些有不同的文本处理。我似乎无法弄清楚。

如果有人想比较，这是原始表格布局。 http://jsfiddle.net/Chris22/q3sCb/3/ 两组代码都有 java spring 表单标签，所以我也有点难以理解，因为我是 FED（前端开发人员）。也许我在这里混淆了一些东西。我不知道。

谢谢！！

PS如果修改原始表格布局是更好的方法，我会很感激一些关于如何开始编码的帮助......我有一段时间没有使用表格进行布局了。

IE9：

Answer 1

我解决了这个问题。可能不是最好的方法，但我将input元素包装在标签中，并在其中的标签中label添加了一条规则。感谢大家的反馈float:rightinput

Answer 2

对于具有值属性的输入的相对简单的表单，我遇到了同样的问题。不确定这是否真的是一个答案，但知道您并不是唯一一个看到错位的人可能会有所帮助。我对为什么有些人没有看到错位感到有些困惑。float:right 提供修复的事实对我很有用，并且可能与长期以来一直是 IE 的“功能”的神秘 hasLayout 属性有关。向左或向右浮动会导致“hasLayout”，但可能会产生其他后果。没有“有布局”的一个常见解决方法是在 CSS 中给所有内容缩放：1 - 这会导致“有布局”并且通常没有任何视觉变化，因为以 1 倍缩放不会调整任何东西的大小。