2013-12-22 2 views
4

Не удалось найти хорошее название для этого вопроса ...CSS Chrome не обновляет центральное положение при использовании положения: фиксировано;

Проблема: при изменении размера окна браузера позиция меню не обновляется в Chrome, пока вы не наводите указатель мыши. В Firefox нет никаких проблем.

Я сделал простой скрипку http://jsfiddle.net/fHcw7/

Если замена 'позиция фиксируется' на 'положении относительно' нет никаких проблем в Chrome

Html

<div id="main"> 
     <div id="div_top" class="menu">  
      <nav> 
       <ul> 
        <li> 
         <a href="#">HELLO</a> 
        </li> 

        <li> 
         <a href="#">WORLD</a> 
        </li> 

        <li> 
         <a href="index.html">BANANA</a> 
        </li> 
       </ul> 
      </nav> 
     </div> 
</div> 

CSS

#main 
{ 
    height: 175%; 
    width: 100%; 
    border: solid red 1px; 
    position: absolute; top: 0; left: 0;   
    overflow: hidden; 
    background-color: #333; 
} 

#div_top 
{ 
    width: 100%; 
    height: 100px; 
    margin-top: 20px; 
    position: fixed; 
    border: solid yellow 1px; 

    text-align: center; 
    font-size: 18px; 
    font-weight: bold; 
    color: #fff; 
    z-index: 100; 
} 

.menu a:link 
{ 
    color: #fff; 
    text-decoration: none; 

} 
.menu a:visited 
{ 
    color: #fff; 
    text-decoration: none; 
} 
.menu a:hover 
{ 
    background-color: rgba(100, 50, 0, 0.4); 
    border-radius: 5px; 
    border: solid white 2px; 
    margin: -2px; 
} 
.menu a:active 
{ 
    color: #fdd; 
} 
.menu ul 
{ 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
} 
.menu li 
{ 
    display: inline; 
    margin: 20px; 
} 
+0

+1, я помню, пытаясь решить эту проблему вчера :) – Doorknob

+0

Да, я сделал новый вопрос, как мы (вы) настоящее время находится проблема :) –

ответ

1

Я думаю, проблема связана с отображением в строка элементов li.
Вместо этого попробуйте заменить их встроенным блоком.
Я проверил вашу скрипку, и она работает.
http://jsfiddle.net/notme/FA8TN/

.menu li 

    { 
     display: inline-block; 
     margin: 20px; 
    } 
+0

Nice один! Работает сейчас! –

Смежные вопросы