Различная высота H1 CSS в Safari / Firefox - PullRequest
Новая
       13

Различная высота H1 CSS в Safari / Firefox

2 голосов
/ 03 апреля 2011

Я недавно создал заставку, которая должна быть анимированной и работала до сих пор в Safari.HTML-код выглядит следующим образом: 

<div id="logo">
    <div id="janik"><h1>Janik</h1></div>
    <div id="lipke"><h1>lipke</h1></div>
    <div id="tog_design"><h2>Photography and Webdesign</h2></div>
</div>

CSS: 

#logo{
top: 40%;
width: 570px;
height: 180px;
margin-left: auto;
margin-right: auto;
/*margin-top: -150px;*/
position: relative;
cursor: pointer;
}

#janik{
width: 300px;
height: 117px;
overflow: hidden;
left: 0;
position: absolute;
}

#janik h1 {
margin: 0;
font-family: Helvetica;
font-weight:normal;
font-size: 142px;
letter-spacing: -8px;
color: #3a3e40;
}

#lipke{
width: 265px;
height: 117px;
overflow: hidden;
left: 295px;
position: absolute;
}

#lipke h1{
margin: 0;
font-family: Helvetica;
font-weight:normal;
font-size: 142px;
letter-spacing: -8px;
color: #4b7586;
}

#tog_design{
text-align: center;
width: 560px;
height: 50px;
position: absolute;
top: 117px;
}

Как я уже упоминал в Safari, это выглядит прекрасно: Снимок экрана Safari

Но в Firfefox теги H1, похоже, имеют разную высоту, и поэтому текст не маскируется, как в Safari, как я планировал.

Я проверил оба браузера с помощью инспектора CSS: enterописание ссылки здесь

«Ошибка» кажется очевидной, но я не могу сказать прямо сейчас, как исправить.Я опробовал несколько изменений ширины по высоте самих тегов h1, а также тегов div.Кто-нибудь может мне помочь с этим?

Приветствия

Ответы [ 2 ]

4 голосов
/ 29 мая 2012

Я нашел лучшее исправление IMO. Используя инспектор элементов в Google Chrome, я заметил, что среди различных панелей правил CSS, которые инспектор говорил мне, применялись или не применялись к моему содержимому тега H, было одно правило CSS, которое не пришло из моих собственных настроек CSS, и оно называлось "таблица стилей агента пользователя" .

. Это пример фактической настройки браузером значения правила CSS.основанный на html элемента (тег H).В моем примере он находится на домашней странице этого домена: http://myrentals -keywest.com / , и CMS визуализировала тег H4 со значением

внутри меня, и я даже не кодировал его.В Firefox и Chrome есть настройка для добавления правила CSS к значению

в теге H4, которое увеличивает значение высоты элемента следующим образом: 

    p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

Итак, я обнаружил, откуда берется добавленная высота,Я исправил это, что не имело никакого нежелательного эффекта в браузерах Safari или Internet Explorer, заключалось в добавлении следующего правила в мой файл CSS, чтобы переопределить правило User Agent: 

h4 p {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}

Мой совет вам, состоит в том, чтобы использовать тот же метод, чтобы определить, какое правило пользовательского агента влияет на желаемый макет в некоторых браузерах, а затем переопределить правило для определенного элемента в вашем собственном файле CSS, скопировав правило пользовательского агента, но изменив его настройку, чтобы соответствовать тому, что выизначально запланировано.

См. изображение снимка экрана для подробной схемы правила User Agent и моего собственного переопределения, которое отменяет агента пользователя :) enter image description here

0 голосов
/ 04 апреля 2011

разные браузеры обрабатывают тег H1 по-разному.Вы можете решить эту проблему, используя свойство line-height css для указания точной высоты строки. 

line-height: 20px;
...