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

我有一个固定宽度的文本框。我正在努力解决浏览器兼容性问题。当我在Firefox中调整宽度时，Chrome显示不正确，它向右侧显示更多的长度

更新了我的代码

HTML

---

我需要文本框放置在完全相同的所有浏览器。但是仍然存在相同的问题

您在内联样式中做了错误的标记。应该是这样写的：

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

---

另外，使用外部CSS样式表！否则您将重复大量代码。

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

尝试这样的单独css样式：在每个文本框中添加类“textbox\u 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>

.textbox_表格{
左边距：5px；
边缘顶部：5px；
宽度：150px；
背景色：#C2FFC2；
}
首先，您的代码是无效的HTML。
name
和
id
属性似乎已放在
style
属性中；这是错误的，使代码无效。这需要修正

其次，我强烈建议为您的样式使用单独的CSS文件。这将帮助您避免重复，并使类似字段具有相同样式变得更容易

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

最后，我猜测，导致跨浏览器问题的最终原因可能是您的页面可能是在“怪癖”模式下呈现的。如果页面开始时没有有效的
，它将进入怪癖模式，这将导致不同的浏览器呈现不同的页面。修复此错误（以及您遇到的其他HTML错误），您将获得更好的跨浏览器一致性。
将
框大小：边框框
（及其
-moz-
前缀对应项）设置为
输入[type=“text”]
。这使得默认的以浏览器为主题的填充物等不会影响结果的尺寸，并且也使得
输入
元素遵循与
选择
和
文本区域
元素相同的框模型（在大多数浏览器中默认情况下，它们具有隐式
框大小：边框框
），使得表单样式设置更容易。
其问题仍然相同
<input type="text" style="margin:0 0 0 -3px; width:386px; height:30px; background:#C2FFC2; border:none" name="content3" id="content3" />

<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>