Question

我的网站上有一个包含一些文字的框。当我在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;
}

Answer 1

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

Answer 2

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

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

Answer 3

使用此代码修复它（至少暂时）

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

感谢Roddy of the Frozen Pea webkit参考

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

3 个答案: