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 Peawebkit参考

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