0

I have a site that has a box with some text in it. When I view it in Chrome, its right at the top, so I have put a padding-top css rule in to element which lines it up correctly on Chrome, but on Firefox, the text is initially centred correctly, and the css rule ruins that. How can I code it (preferably without a browser detector on the server) so that it pads down the text in chrome, but not in firefox?

EDIT:

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

3 回答 3

3

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

于 2012-07-25T17:50:41.520 回答
1

如果只是你关心的那两个浏览器，你可以为 Chrome 添加 webkit-specific CSS。所以，在你的例子中，你需要一个额外padding-top的 Chrome: -webkit-padding-before。这将仅将填充应用于 webkit 浏览器（Chrome、Safari 等），而不应用于 Firefox、IE 或 Opera。

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

于 2012-07-25T17:51:02.560 回答
-1

使用此代码修复它（至少目前）

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

谢谢你Roddy of the Frozen Pea的webkit参考

于 2012-07-25T18:01:35.840 回答