無法調整捕捉到基線網格的垂直間距

有a demo page帶有兩個塊級元素，即h1和h2。我嘗試以跨瀏覽器的方式將所有基線完全放在網格上，但是我失敗了，並且出現了第二個標題。無法調整捕捉到基線網格的垂直間距

對於h1，我嘗試了margin-top，發現它的值可以設置在1.5px和1.85px之間 - 然後標題在所有瀏覽器中捕捉到基線。

但試圖找到margin-toph2的類似範圍，我達到了一個僵局。在大多數瀏覽器（例如Chrome或Safari）中，適當的範圍是4px到4.99px。但是在Windows上的Firefox（並且僅在Windows上），它是3px到3.99px。因此，可能的保證金值沒有相交的子範圍。如果標題在一個瀏覽器中完美捕捉，則會錯過另一個瀏覽器中的正好1個像素。

你能提出任何解決方案嗎？

來源

2016-07-26 Hydrochoerus Hydrochaeris

試試這個：https://drewish.com/tools/vertical-節奏/ – Toby

@Toby，這種方法在理論上是好的，但實際上它導致在不同瀏覽器中相同的±1像素分散。 –

我發現Mac上的Firefox和Windows上的Firefox一樣，但是在Linux上它的處理方式不同。所以，直到一個跨瀏覽器的解決方案被發現，恐怕我不得不使用CSS黑客攻擊目標的Firefox在Windows和Mac專門：

@media screen and (-moz-windows-theme) { 
    … CSS for Windows goes here … 
} 

@supports(-moz-osx-font-smoothing:auto) { 
    … CSS for Mac goes here … 
}

來源

2016-07-27 13:50:42

無法調整捕捉到基線網格的垂直間距

回答

相關問題