IE 中的内联输入有奇怪的问题答案

【问题标题】：Having strange issues with inline inputs in IEIE 中的内联输入有奇怪的问题
【发布时间】：2010-10-07 08:12:09
【问题描述】：

由于良好的开发人员工具，我整天都在构建表单并在 webkit 浏览器中完成我的大部分开发工作。我在 IE 中进行了测试，关于连续 3 列 div 的结果非常奇怪。我似乎找不到解决办法。有没有人见过这个问题（见下面的链接）？

http://65.61.167.68/form/

【问题讨论】：

+1 用于共享表单。我喜欢有一个帮助框的想法。

【解决方案1】：

我建议避免使用display: inline-block，因为 IE 6 和 7 没有正确实现它。在这种情况下，您可以通过更改样式表的第 33 行来解决 FF 中的问题。删除 display: inline-block 并改为向左浮动。

#paydayForm .row .column
{
    float:left;
    margin-bottom:5px;
    margin-right:18px;
    margin-top:5px;
    width:170px;
}

【讨论】：

玩了一会儿后能够修复 FF 问题，但仍试图找出 IE 问题:-(

【解决方案2】：

您的问题没有答案，但是对于这种数据，使用表格而不是 div 会好得多。 Divs 可能很有用，但在这种情况下不是。检查以下示例：http://jsfiddle.net/NtXwQ/

<table>
  <tr>
    <td colspan="2">amount requested</td>
    <td rowspan="2">info<br />text<br />here</td>
  </tr>
  <tr>
    <td>first name</td>
    <td>last name</td>
  </tr>
  <tr>
    <td>zip code</td>
    <td>city</td>
    <td>state</td>
  </tr>
  <tr>
    <td colspan="2">date of birth</td>
    <td>social security no</td>
  </tr>
</table>

使用 CSS，您可以更改宽度、高度、填充等，并创建与您现在使用的相同的样式。最后，这样的设置也更容易维护。使用 div 显示表格数据只会让你头疼:)

【讨论】：