Question

实现无边框的table，table中有input控件，td设置了padding，但input宽度设置为100%，右边始终要超边界。

css文件。
.grid{ border:none; /*这个不能设置，需要在td中设置*/ border-collapse:collapse; /*这个就是设置grid边框合并模式为细线条*/ font-family:Arial; } .grid tr{ height:30px; }.grid td{ margin:0px; padding:6px; border:1px solid #8DB2E3; /* 单元格边框 */ font-size:14px;} .grid input { /**/width:100%; padding:1px 0px 1px 3px; margin:0px; /*border:none; 输入框不要边框 */ font-family:Arial; font-size:14px; height:24px;}
html用的XHTML1.0标准（用html4.0标准居中有问题）
html中的代码类似于下面的写法：
<table id="grid1" width="800px" class="grid" align="center" border=0 > <tr> <td>单位名称</td> <td colspan="3"><input type="text" name="name" value= "${org.name}" /><div style="width:13px;" /></td> </tr> <tr> <td>单位地址</td> <td colspan="3"><input type="text" name="addr" value= "${org.addr}" /></td> </tr> </table>
出来的效果为：

Answer 1

既然table设置了100%，table本身自带的标签td就不能写padding，因为IE是把padding计算在总宽度上的。实际的宽度会是100%+padding总宽度。

去除padding，在input上加上margin即可，用来替代padding所产生的距离效果。

input内部建议不要使用padding，可使用text-indent来控制文字左边距。

Answer 2

我公共样式里有个vertical-align: baseline;
当它在的时候：td的高度60px；td只有一个p标签，p的行高60px，这个时候td的高度为72px=》60加12的padding（我没写任何padding，padding：0；也没用），
把vertical-align: baseline;注释就好了