2016-03-20 3 views
0

На сайте, который я разрабатываю, я хочу, чтобы фиксированное меню вверху, которое растет при прокрутке. Он отлично работает на Chrome и Firefox, но когда я пытаюсь сафари, он добавляет преимущество сверху.Исправлен заголовок с таинственным запасом в Safari

Заголовок HTML:

<div id="top-background"> 
    <div id="top-menu"> 
     <header class="large"> 
      <nav><img class="logo" src="img/logo-color-solo.png"/> 
      <ul class="menu"> 
       <li><span><a data-scroll href="#de-que-se-trata">¿De qué<br/>se trata?</a></span></li> 
       <li><span><a data-scroll href="#beneficios">¿Cuáles son<br/>los beneficios?</a></span></li> 
       <li><a data-scroll href="#como-se-usa"><span>¿Cómo se usa?</a></span></li> 
       <!--<li><a href="#"><span>¿Cuáles son las<br/>membresías?</a></span></li>--> 
       <li><a data-scroll href="#unete"><span>Únete</a></span></li> 
      </ul> 
      </nav> 
     </header> 
    </div> 
... 

Заголовок CSS:

header{ 
    background-color: rgba(255, 255, 255, 0.95); 
    border-bottom: 1px solid #aaaaaa; 
    float: left; 
    width: 100%; 
    position: fixed; 
    z-index: 10; 
} 

это, как это выглядит на Chrome/Firefox (правильный путь) Chrome/Firefox render

И это, как он выглядит на Safari (неверно): enter image description here

... как вы можете видеть, есть огромный белый край сверху. Не знаю, что это. Если я удалю весь CSS-код элемента заголовка, маржа исчезнет. Я также попытался удалить каждую собственность отдельно, но я все время вижу ту же маржу.

Thanx за любую помощь

+3

Почему 'float: left'? Также попробуйте добавить 'top: 0' и посмотреть, что получится – Aziz

+1

, похоже, это край марка awto от внутреннего текста изображения. – steven

+1

просто добавьте координированный верх: 0; ... и в итоге ушел: 0; чтобы избежать другого неожиданного поведения –

ответ

1

Вам просто нужно добавить top: 0; в навигационной панели, так что Navbar всегда знает, где остановиться. Надеюсь, это поможет :)

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