刪除大寫頭附近的空格

我有一個以大寫字母顯示的標題。我想在這個標題和下面的框框之間只有2個像素。刪除大寫頭附近的空格

如果文本包含像'g'這樣的小寫字母，下面沒有空格，但是一旦所有的'g'，'y'和'j'字母都消失了，它就會出現。

是否有任何跨瀏覽器的方法來擺脫該空間？顯然瀏覽器顯示不同數量的空白空間：https://jsfiddle.net/5o94va6p/13/，所以像line-height: 0.7這樣的技巧在Firefox中工作，但在Safari中吃太多空間。

2016-11-16 Michal

你寫道：「如果文本是正常的」 - 你是什麼意思？ – Johannes

謝謝，我編輯了這段文字，使其明確。 – Michal

Safari和chrome在空白空間方面看起來相似。 Firefox看起來不同的瀏覽器。我只會使用CSS爲它指定行高。這樣，Firefox看起來不錯，而且不會影響其他瀏覽器的外觀。

嘗試這個代碼，這將僅靶向的Firefox：

@-moz-document url-prefix() { 
    h1 { 
     line-height: 0.7 
    } 
}

2016-11-16 22:23:38 Ibrahim

如果Firefox以其他方式呈現其中一種方式和所有其他瀏覽器，那麼這將起作用。我擔心每個瀏覽器都在自己計算，並且會有一些差異。 – Michal

@Michal在我的Mac，Chrome和Safari測試中看起來與空白空間完全相同。唯一一個呈現不同空間的瀏覽器是Firefox。至於Internet Explorer，我沒有對它進行測試，坦率地說，我認爲沒有人再使用它了。 – Ibrahim

唉，Chrome/Windows比Safari/macOS提供更多的空間，所以它看起來也可能與操作系統有關。 – Michal

嘗試使用此 -

.box{ 
    margin-top: 2px; 
    position: fixed; 
}

2016-11-16 22:48:25 ross

它使Firefox中的空間更大。 – Michal

這是需要像Y，G信低於基線的空間，對等是總是在那裏，它是行高的一部分 - 這是你的問題的原因。除非你定義了一個負邊界底值，否則你不能改變它，就像

.my_heading { 
    margin-bottom: -4px; 
}

2016-11-16 23:17:07 Johannes

是的，我明白這一點。問題在於Firefox和其他瀏覽器的空間不同 - 請參閱我的示例。添加固定的負邊界並不能解決這個問題，FF的空間依然很大，Safari的空間依然很小。 – Michal

是否使用完全相同的字體？您可以嘗試爲像素添加行高的定義。瀏覽器之間的默認行高可能不同。 – Johannes

這就是問題所在，相同的字體在不同的瀏覽器中需要不同的空間。 – Michal

回答