如何使CSS填充工作在Chrome中但不在Firefox或Safari中？

我已经完成了我的初始代码在我的本地主机，只是将文件迁移到我的linode。谷歌浏览器似乎无法识别我放在主设置中的CSS填充设置。 Firefox和Safari似乎没有一个渲染它的程序。如何使CSS填充工作在Chrome中但不在Firefox或Safari中？

main.main { 
 
    padding-top: 50px; 
 
}

<main class="main"> 
 
    <h1>Sometext</h1> 
 
</main>

作品在Chrome我。 – Alohci

我在Chrome上，可以看到填充。我不知道任何例子，像padding这样的基本东西在最常见的浏览器中有不同的行为，所以也许问题在别的地方。 –

您使用的是reset.css或normalize.css样式表吗？也许应用了默认的浏览器样式，这就是浏览器之间存在差异的原因。如果您可以为我们提供实时链接，我们可以继续尝试解决，因为在Chrome中，该示例正在运行。 –

尝试使用这种

@media screen and (-webkit-min-device-pixel-ratio:0) {}

2017-08-28 09:46:09

我不确定，但不safari也使用-webkit前缀？ –

我的Mac在家里（如果你有野生动物园，你可以测试它例如@media screen和（-webkit-min-device-pixel-ratio：0）{ \t body {border：5px solid red！important;} } } –

我没有一个mac，所以我不能测试它，只是想知道，如果是这样的话 –

请试试这个：

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
    main.main { 
    padding-top: 50px; 
} 
}

2017-08-28 09:52:23 satya

回答