На сайте, который я разрабатываю, я хочу, чтобы фиксированное меню вверху, которое растет при прокрутке. Он отлично работает на 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 (правильный путь)
И это, как он выглядит на Safari (неверно):
... как вы можете видеть, есть огромный белый край сверху. Не знаю, что это. Если я удалю весь CSS-код элемента заголовка, маржа исчезнет. Я также попытался удалить каждую собственность отдельно, но я все время вижу ту же маржу.
Thanx за любую помощь
Почему 'float: left'? Также попробуйте добавить 'top: 0' и посмотреть, что получится – Aziz
, похоже, это край марка awto от внутреннего текста изображения. – steven
просто добавьте координированный верх: 0; ... и в итоге ушел: 0; чтобы избежать другого неожиданного поведения –