如何使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

回答