0

如何使文本框宽度在所有浏览器中看起来一致？

这是我的代码：

<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 中的不同。

是什么导致了这种差异，我该如何解决？

演示

4

2 回答 2

1
  1. 重置 CSS（参见Erik Meyers CSS或其他）
  2. 仅应用您关心的所有浏览器都支持的 CSS 属性（请参阅CanIUse）
于 2013-08-06T09:09:37.880 回答
0

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

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

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

再次注意，除非您使用绝对位置、相对位置或固定位置，否则使用负边距有点小题大做。您可能最好以不同的方式定位它们或以不同的方式布置它们。

于 2013-08-06T09:09:15.310 回答