Question

如何让所有浏览器的文本框宽度看起来均匀？

这是我的代码：

<table>
  <tbody>
    <tr class="att">
      <td>
        <input type="text" class=a /> </td>
      <td>
        <input type="text" class=b /></td>
    </tr>
  </tbody>
</table>

.a {
  margin:6px -116px 9px -7px;w
  idth:190px;
  height:30px;
  background-color:#C2FFC2;
  border:0px
}

.b {
  margin:6px -116px 9px -7px;
  width:190px;
  height:30px;
  background-color:#C2FFC2;
  border:0px;
}

但在Google Chrome中，输入框与Firefox中的输入框不同。

造成这种差异的原因是什么，我该如何解决？

demo

Answer 1

重置CSS（请参阅Erik Meyers CSS或others）
仅应用您关注的所有浏览器都支持的CSS属性（请参阅CanIUse）

Answer 2

如果您正在设置宽度，那么它们应该在所有浏览器中以这种方式呈现，除非是其他因素。可能在td或tr上设置了影响它的宽度。

另外在另一个注意事项中，您应该使用单独的CSS文件来设置它们的样式（因为您的输入具有相同的样式）。所以你可以这样做：

input[type="type"] { 
  margin: 6px -116px 9px -7px;
  width: 190px;
  height: 30px;
  background-color: #C2FFC2;
  border: none; }

另一个注意事项是，除非你使用绝对，相对或固定位置，否则使用负边距会有点麻烦。你可能最好以不同的方式定位它们或以不同的方式排列它们。

如何使文本框宽度看起来统一所有浏览器

demo

2 个答案: