定位文本以在 Firefox 和 Chrome 上显示相同答案

【问题标题】：Positioning Text to appear Identically on Firefox and Chrome定位文本以在 Firefox 和 Chrome 上显示相同
【发布时间】：2012-07-26 02:01:35
【问题描述】：

我有一个网站，其中有一个包含一些文本的框。当我在 Chrome 中查看它时，它位于顶部，所以我在元素中添加了 padding-top css 规则，该规则在 Chrome 上正确排列，但在 Firefox 上，文本最初正确居中，并且 css 规则被破坏那。我该如何编码（最好在服务器上没有浏览器检测器）以便它在 chrome 中填充文本，而不是在 firefox 中？

编辑：

.footer input[type="submit"]
{
    border: none;
    color: #FFFFFF;
    font-size: 16px;
    height: 35px;
    padding: 9px 10px;
    margin: 0px;
}

【问题讨论】：

最好的解决方案是制作一个坚实的布局，这将在 chrome 和 firefox 中为您提供相同的结果。如果您可以向我们展示一个 CSS 和 HTML 示例，那也会很有帮助:)

标签： css firefox google-chrome positioning

【解决方案1】：

我的建议是您使用CSS reset 来消除浏览器之间的差异。如果没有看到具体的代码，很难说这是否会 100% 解决您的问题。

【讨论】：

将来肯定会使用该代码，但遗憾的是，在这种情况下，它不起作用
使用jsFiddle 重新创建场景供我们查看和玩耍。

【解决方案2】：

如果您只关心这两个浏览器，您可以为 Chrome 添加特定于 webkit 的 CSS。因此，在您的示例中，您需要一个额外的 padding-top 用于 Chrome：-webkit-padding-before。这将仅将填充应用于 webkit 浏览器（Chrome、Safari 等），而不应用于 Firefox、IE 或 Opera。

不过，最好的办法是应用 CSS 重置，然后为所有浏览器设置相同的样式。如果这不是一个选项，那么您可以像我上面提到的那样针对特定引擎（webkit 等）。但是，这不是推荐或考虑的“最佳做法”。

【讨论】：

【解决方案3】：

用这段代码修复它（至少暂时）

padding: 8px 10px 6px;
-webkit-padding-after: 8px;

感谢Roddy of the Frozen Pea 提供webkit 参考

【讨论】：