Chrome和Firefox中的输入框宽度不同

Question

这张图片是从谷歌浏览器中截取的

这张图片是从火狐浏览器中截取的

你可以看到文本类型输入框（姓名：，电子邮件：，电话：）之间的差异。

那么我该如何管理它呢？是否有一种技术可以使用Firefox的CSS和Chrome的另一个CSS？

- Navin Rauniyar

---

我不确定你在问什么。个人而言，我看不出它们两者之间有太大的区别，但是如果您在问是否可以将CSS应用于每个浏览器，则是可以的。是的，有些代码需要应用于其中一个而不是另一个。 - Keith

你可以使用CSS控制文本输入字段的宽度，我认为你不需要针对每个浏览器进行特定的目标设置。 - Huangism

文本名称：姓名：电子邮件：和电话：-> 在此之下，输入（文本类型）的宽度不同。 - Navin Rauniyar

关于 CSS 技术的技巧，请查看此链接：https://dev59.com/xmYq5IYBdhLWcg3wwDJA - Arun

Answer 1

除非你使用CSS严格规定字段的外观，否则浏览器将使用它们各自的默认输入小部件（这些小部件不同，取决于操作系统...）。

当未使用足够的CSS时，会出现问题。

- bmurauer

---

我已经定义了宽度，但也是可变的。 - Navin Rauniyar

@NavinRauniyar 那么问题可能出在布局上。请展示 HTML 代码。 - Mr_Green

@NavinRauniyar，请编辑您的问题，包含相关的HTML和CSS代码（尽可能小，但足以重现问题）。如果您还包括一个实时URL，请输入完整的带有http://的URL，并使用实际显示问题的页面的URL。 - Jukka K. Korpela

Answer 2

我通过设置 border: 1px solid #ccc; 解决了我的问题。因为火狐和谷歌默认的边框样式不同。

- Navin Rauniyar

Answer 3

我认为你的修复方法是添加这个规则

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

到

# message {

或者

.message {

类似于

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

而不是简单地使用

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

- Dash