如何使用列表中显示的表单元素和基于“ display：table”的布局修复Internet Explorer 9溢出

Question

我想用语义和轻量级标记构建HTML表单。 每个（标签，输入）嵌套在li节点内， ul子级， form 。 就CSS而言， form内的所有ul都应布置为表格，列表项应布置为表格行，标签和输入都布置为表格单元格。

这是一个演示

我已经在Chrome 17.0.963.79，Opera 11.61，Safari 5.0.2，Firefox 8.0甚至IE 8.0.7601.17514中尝试了上述演示，它看起来就像我想要的那样。

但是，似乎IE 9.0.8112.15421的计算错误：元素占用了我希望它们占用的空间，开发工具没有显示不希望的边距或填充，但是显然包含li的形式（从不包含li本身，也不包含ul ！-参见演示）获取两次添加标签的宽度，从而导致一些未占空间 ，从而将水平滚动条添加到该祖先。 为什么会这样呢？ 如何解决？

Answer 1

我添加了一个float:right来form li input并在IE9中获得了与Chrome类似的结果。