3个步骤帮助为所有常见网络浏览器的HTML文本输入设置样式

如何确保文本输入元素在所有浏览器中看起来都一样？

作者的图形

当我在90年代末开始进行网络开发时，让网页布局在每个浏览器上看起来都一样是一项艰巨的工作。当时有Netscape，后来有Mozilla，早期版本的IE4、5，后来有IE6，还有Opera和其他一些今天被遗忘的浏览器。甚至MAC OS也有一个特殊版本的IE浏览器。

所有这些浏览器对CSS的实现都很差，呈现的效果也不尽相同。幸运的是，这种情况在过去几年里有所改变。苹果公司开始在Safari浏览器中使用WebKit引擎，随后谷歌的Chrome浏览器也开始使用WebKit，是的，甚至微软也通过最新版本的Edge从Trident转向WebKit。

所以现在，让网页在每个浏览器上看起来都一样要容易得多。但仍有一些小的差异，特别是在输入元素方面。

基本的HTML代码看起来像这样。

<input type=text />

以下是MAC OS X的不同浏览器的结果。

从上到下。火狐、Safari、Chrome和Opera

和这里的Windows 10。

从上到下。IE11, Edge Firefox, Chrome和Opera

在第一现场，我们看到所有的文本输入看起来都非常相似，除了Safari，各浏览器的元素长度都不一样。

第一步。

假设我们想要一个2px的橙色边框，4px的圆角，作为我们的输入。为了避免一些不必要的间隔，我们把margin和padding设置为0。

input {   margin: 0px;   padding: 0px;   border: 2px solid #ff6600;   border-radius: 4px;}

MAC OS X的结果。

从上到下。Firefox、Safari、Chrome和Opera

Windows 10的结果。

从上到下。IE11, Edge Firefox, Chrome和Opera

第二步。

间距、边界和半径已经完成。现在我们统一一下字体。

input {   margin: 0px;   padding: 0px;   border: 2px solid #ff6600;   border-radius: 4px;   font-family: arial, helvetica, sans-serif;   font-size: 16px;   line-height: 22px;}

MAC OS X的结果。

从上到下。Firefox, Safari, Chrome 和 Opera

Windows 10的结果。

从上到下。IE11, Edge Firefox, Chrome和Opera

IE11在这里做了什么？

它忽略了行高!所以我们必须将输入的高度设置为与行高相同。

input {   margin: 0px;   padding: 0px;   border: 2px solid #ff6600;   border-radius: 4px;   font-family: arial, helvetica, sans-serif;   font-size: 16px;   line-height: 22px;   height: 22px;}

现在它看起来很不错。

从上到下。IE11, Edge Firefox, Chrome和Opera

第三步

最后，我们用一个固定的值来固定所有浏览器的宽度，并添加一些填充物，以便在字段中的文本周围获得一个漂亮的空间。

input {   margin: 0px;   padding: 1px 5px 0px 5px;   border: 2px solid #ff6600;   border-radius: 4px;   font-family: arial, helvetica, sans-serif;   font-size: 16px;   line-height: 22px;   height: 22px;   width: 200px;}