Question

我有一个固定宽度的文本框。我正在努力与浏览器兼容。当我在Firefox中修复宽度时，Chrome显示不正确，它向右显示更长的长度。

更新了我的代码

HTML

<form name="welcomeDiv1" id="welcomeDiv1">
<tr class="unsortable" >

<tr>
 <td>
<input type="text" class="textbox_form" name="content" id="content" />
</td>

<td>
<input type="text" class="textbox_form2" name="content2" id="content2"/ >
</td>

 <td>
 <input type="text" class="textbox_form3" name="content3" id="content3"/ >
 </td>

 <td>   
  <input type="text" class="textbox_form4" name="content4" id="content4" />
  </td>

<td>
<input type="text" class="textbox_form5" name="content5" id="content5"/ >
</td>

<td>
 <input type="text" class="textbox_form6" name="content6" id="content6" />
 </td>  

<td> <input type="submit" class="textbox_form7"  value="+"  name="submit" class="globalinsert_button"/></td>

  </tr>
 </form>

CSS

.textbox_form {
               margin:0 0 0 1px;
               width:162px;
               height:30px;
               background-color:#C2FFC2;
    }
    .textbox_form2 {
              margin:0 0 0 -3px;
              width:329px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form3 {
              margin:0 0 0 -3px;
              width:386px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form4 {
              margin:0 0 0 -3px;
              width:138px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form5 {
              margin:0 0 0 -2px;
              width:158px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form6 {
              margin:0 0 0 -2px;
              width:204px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form7 {
             margin:0 0 0 17px;
    }

我需要将文本框放在所有浏览器中完全相同的位置。但它仍然是同一个问题

Answer 1

您的样式属性未关闭，请检查。

尝试单独的css样式：在每个文本框中添加类'textbox_form'

<style>
    .textbox_form {
        margin-left: 5px;
        margin-top: 5px;
        width: 150px;
        background-color:#C2FFC2;
    }
    </style>

    <td>
    <input type="text" class="textbox_form" name="content" id="content" border:0px">
    </td>

Answer 2

你正在为内联样式做错标记。它应该是这样的：

<input type="text" style="margin:0 0 0 -3px; width:386px; height:30px; background:#C2FFC2; border:none" name="content3" id="content3" />

另外，使用外部CSS样式表！否则你会重复很多代码。

Answer 3

~~首先，您的代码是无效的HTML。 name和id属性似乎已放入style属性中;这是错误的，并且使代码无法使用。这需要修复。~~

~~其次，我强烈建议您为样式使用单独的CSS文件。这将有助于您避免重复，并且还可以更容易地为相似的字段提供相同的样式。~~

[编辑]上述两点现已在问题中得到解决。

最后，我猜测您的跨浏览器问题的最终原因是您的页面可能在Quirks模式下呈现。如果您的页面在开始时没有有效的<!DOCTYPE>，它将进入怪异模式，这将导致不同的浏览器以不同的方式呈现页面。修复此问题（以及您获得的其他HTML错误），您将获得更好的跨浏览器一致性。

Answer 4

将box-sizing: border-box（及其-moz-前缀对应项）设置为input[type="text"]。这使得默认的以浏览器为主题的填充等不会影响生成的维度，并且input个元素也会遵循与select和textarea元素相同的框模型（它们具有隐式{{1}默认情况下，在大多数浏览器中），使表单样式更容易。

如何使所有浏览器的文本框宽度相同

4 个答案: