输入类型文本宽度在chrome和firefox中是不同的

Question

此图片是从谷歌浏览器中捕获的

此图片来自mozilla firefox

您可以看到文本类型输入的不同（名称：，电子邮件：，电话:)。

那么我该如何管理呢？是否有任何技术使用css for firefox和另一个css for chrome

Answer 1

除非您使用CSS为字段指定严格的外观，否则两个浏览器都将使用其默认输入窗口小部件（这些窗口小部件不同，并且取决于操作系统，...）。

使用没有/没有足够的CSS时会出现问题。

Answer 2

我通过设置border: 1px solid #ccc;解决了我的问题。因为默认情况下，firefox和chrome的边界样式不同。

Answer 3

我认为您的修正是添加此规则

width: 300px; /* change size accordingly */

到

# message {

或

.message {

像

  

<input class="message" id="message" name="message" type="text" />

而不是简单地使用

<input id="" name="" type="text"/>