如何强制表单元素在浏览器中呈现相同的内容？答案

【问题标题】：How can I force form elements to render the same across browsers?如何强制表单元素在浏览器中呈现相同的内容？
【发布时间】：2012-01-29 08:03:39
【问题描述】：

这是我的联系表单在所有不同浏览器中的外观图片：

我尝试过编辑一些 CSS，但我正在寻找对这些元素的完全控制，但我也不想失去灵活性（我也在使用 jQuery）。

有没有办法覆盖这些文本区域的浏览器呈现方法，还是我坚持使用默认样式？

【问题讨论】：

见Remove default browser styles on form elements。接受的答案完美地说明了这一点。有办法做到这一点，但它依赖于javascript，永远无法保证，老实说：你不需要它。你可能认为你有，但你没有。不要让你失望，但没有关于浏览器如何使用 CSS 设置表单控件样式的规范。你必须拿走你能得到的。
我在某种程度上使用了 normalized.css 方法。下面解释。谢谢！

标签： html css cross-browser

【解决方案1】：

看看normalize.css（表单元素从 293 开始）。 normalize.css 使浏览器一致地呈现所有元素并符合现代标准。这不是一个快速的解决方案，但至少它会给你的元素一些可以工作的一致性。如果您使用它，请确保在其他样式之前加载它，否则 normalize.css 样式将覆盖您的主样式表。

【讨论】：

我不必加载整个规范化 css。我只是将 5 到 6 行复制到我正在使用的当前 css 中，它可以在所有浏览器中完美运行。我会再次将所有这些组合在一起制作一个 jpeg，但我不需要！这就是它在所有平台上的样子[有细微的样式差异]imgur.com/714bs

【解决方案2】：

尝试使用normalize.css。它为大多数 CSS 元素提供了跨浏览器的兼容性解决方案。

【讨论】：