Различия в вертикальном выравнивании для Webkit против Mozilla - PullRequest
0 голосов
/ 14 апреля 2011

Хорошо, поэтому в Mozilla мой сайт выглядит так, как я и предполагал. Однако в браузерах webkit элементы h1 и h2 смещены вниз примерно на 4 пикселя. В чем дело?

http://wbjah.com/stackoverflow.htm

h1 {
color: #739e39;
text-shadow: 0px 0px 5px #000;
font-size: 50px;
font-weight: bold;
margin: 0px;
line-height: 50px;
padding: 0px;
}

h1 a:hover{
color: #739e39;
text-shadow: 0px 0px 5px #739e39;
font-size: 50px;
font-weight: bold;
}

h2 {
color: #739e39;
text-shadow: 0px 0px 5px #000;
font-size: 40px;
font-weight: bold;
margin: 0px;
line-height: 40px;
padding: 0px;
}

1 Ответ

1 голос
/ 18 апреля 2011

Возможно, вам повезет больше, если использовать inline-block вместо float, поскольку при этом не нужно возиться с line-height.

  1. Удалите <br> перед motto here
  2. Изменить #headbox с float: left; на display: inline-block;
  3. Удалить line-height: 50px; из h1
  4. Удалить height: 50px; из #header
...