Firefox отличается от Safari/Chrome

Question

Я провел несколько хороших часов, отлаживая себя, и несколько хороших часов исследования, но ничто, кажется, не решает мою проблему. У меня есть заголовок в моем заголовке, который должен быть отсечка на дне, который выглядит хорошо в Safari и Chrome, но в Firefox он расположен гораздо выше:

Первое окно: Firefox

Второе окно: Safari (хром делает то же самое)

Я потратил около полутора часов на то, чтобы изменить все вокруг в моем CSS, думая, что это связано с другими элементами вокруг него, но не достиг прогресса. В конце концов я решил сделать чрезвычайно упрощенную версию, чтобы увидеть, в чем проблема:

Первое окно: Firefox

Второе окно: Safari (хром делает то же самое)

То же самое точно. У меня есть сброс CSS, так что это не проблема. Я пробовал установить line-height, но это не исправить. Я пробовал каждое значение для свойства отображения CSS. Ничего не исправляет это.

HTML/CSS для тестового примера выше:

<div class="test"> 
    <h1>Test</h1> 
</div> 

---

.test { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 185px; 
    line-height: 185px; 
    border: 1px solid red; 
} 

.test h1 { 
    font-size: 12em; 
} 

• Мой сайт можно посмотреть на samrapdev.com.
• Быстрая ссылка на CSS stylesheet
• Короче говоря, мне нужно, чтобы выяснить, как получить оба браузера для отображения текста в точно такой же высоте

Answer 1

Попробуйте указать семейство шрифтов в вашей таблице стилей, хотя оно не идеально подходит для пикселя

Answer 2

#header .youAreHere h1 
{ 
    ... 
    line-height:1; 
} 

высота линии должна быть установлена ​​на h1, если у вас есть что-то вроде

* {line-height:inherit;} 

Answer 3

Даже если вы берете webfont и определяете высоту строки вашего элемента, вы можете иметь вариации из-за высоты линии других элементов ,

Что для меня работает, так это определить высоту линии тела в верхней части веб-сайта.

Также не забудьте сбросить поля и прокладки для всех элементов, которые вы используете. Хороший фокус в том, чтобы использовать reset.css до вашей фактической таблицы стилей (вы можете найти некоторые на http://www.cssreset.com/)

body{ 
    line-height: 1; 
}