У меня проблема с Chrome, который нормально отображает мою страницу при локальной загрузке, но что-то идет не так, когда страница находится в сети. Первое, что я сделал, это проверил Safari, потому что они оба используют один и тот же движок рендеринга. Safari отлично отображает мою страницу.
Если щелкнуть ссылку на странице и нажать кнопку «Назад», страница также загрузится нормально.
Вот изображение, показывающее, как страница загружается локально в Chrome:
И здесь заголовок сдвигается вниз, когда страница находится в сети:
Вот соответствующий html:
И CSS:
#header2 {
position: relative;
z-index: 999;
height: 40px;
width: 100%;
background: #000;
box-shadow: 0em 0em 0.5em #000;
-webkit-box-shadow: 0em 0em 0.5em #000; /* safari */
/* header nav type */
font-family: "Varela Round", Helvetica, Arial, sans-serif;
font-size: 15px;
}
#header2 ul {
float: right;
list-style-type: none;
}
#header2 li {
display: block;
float: left;
height: 32px;
margin: 10px 16px 0;
}
/* sign up/log in button */
#header2 li.blue {
background: url('../images/detailpages/login.png');
width: 170px;
height: 40px;
margin: 0;
}
#header2 li.blue a {
display: block;
float: left;
margin: 10px 3px 0 24px;
}
#header2 input {
height: 22px;
width: 220px;
padding: 0 8px;
font-family: "Varela Round", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
}
#header2 form img {
display: block;
float: right;
padding-left: 5px;
}
У этого парня была та же проблема, но не похоже, что есть решение: Отрисовка CSS в Chrome в интерактивном режиме отличается от оффлайн