Элемент блочной позиции не работает в Chrome

Question

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

www.gadgetcote.com / Bangda

Это CSS для заголовка и оболочки содержимого:

#headerWrapper{
    display:block;
    height:150px;
    width: 100%;
    padding-top:20px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:999999;
    background:url(../images/body-bg.png) no-repeat center top #0066ff;
}

#contentWrapper{
    margin-top: 125px;
    padding-bottom:32px;
    padding-top: 100px;
}

Если я открою его в Chrome, он не будет отображаться правильно. У кого-нибудь есть идеи по этому поводу или как это сделать правильно? большое спасибо

Answer 1

На самом деле вам нужна фиксированная строка меню, как твиттер. Просто используйте Twitter начальной загрузки, чтобы добиться этого. http://twitter.github.com/bootstrap/#navigation Его просто использовать. Фиксированное меню встроено в него. Также вы получите хороший и стандартный стиль для вашего сайта. Используйте ссылку CSS

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">

или загрузите файл bootstrap.css и используйте его. И вам не нужно беспокоиться о CSS!

Answer 2

"но в Chrome мне нужно обновить страницу, чтобы она заработала."

Просто добавьте, что Chrome любит хранить CSS в своем кеше. В этом случае обновление страницы или очистка кеша (Инструменты> Очистить данные обозревателя> Очистить кеш) исправят это.

Answer 3

Это может быть связано с проблемой позиции.

position:fixed;

Можете ли вы дать мне ссылку на ваш сайт?Я не могу понять проблему.Мне нужно проверить HTML и полный CSS-код.