Я пытаюсь создать горизонтальное меню, выровненное по вертикали и горизонтали.
Я на самом деле использую теги
- В Internet Explorer 9 фон, который появляется при наведении курсора мыши на элемент, перемещается на 1 пиксель выше, поверх черной линии.
- В Chrome элемент li имеет высоту 20 пикселей вместо 16, как в Firefox, перемещая меню немного ниже
- В сафари и опере у меня та же проблема с хромом.
Обратите внимание, что у Opera, Safari и Chrome также есть проблема, когда мой разделитель имеет высоту 3px и 1px большой, в то время как в Firefox я могу правильно его визуализировать.
Я не знаю, почему, а потомуЯ потерял 2 ночи из-за этой проблемы. Думаю, мне определенно нужна помощь.
Вот ситуация с Firefox (вы можете нажать на картинку для увеличения):
Здесь вы можете увидеть ситуацию с Chrome (веб-набор в целом):
css для меню это:
#menu
{
bottom: 111px;
height: 54px;
width: 100%;
top: auto;
}
#menu-bar-top, #menu nav
{
background-repeat: repeat-x;
width: inherit;
}
#menu-bar-top
{
background-image: url(../../img/Layouts/default/Hr-bottom.png);
background-color: transparent;
border-style: none;
height: 18px;
}
#menu nav
{
background-image: url(../../img/Layouts/default/Menu-background.png);
height: 36px;
}
#menu nav div
{
text-align: center;
height: inherit;
margin: 0;
}
#menu nav ul
{
list-style-type: none;
font-family: Ethnocentric;
font-size: 1.2em;
padding: 0;
height: inherit;
margin: 0;
color: white;
}
#menu nav ul li
{
position: relative;
top: 10px;
display: inline;
padding: 0;
margin: 0;
}
#menu nav ul li.menu-separator
{
background-position: center center;
background-repeat: no-repeat;
background-image: url(../../img/Layouts/default/Menu-separator.png);
font-size: 1px;
}
#menu nav ul li a
{
text-decoration: none;
padding: 10px 10px 8px 10px;
margin: 0 -5px;
color: white;
}
#menu nav ul li a:hover
{
background-position: 0px 0px;
background-repeat: repeat-x;
background-image: url(../../img/Layouts/default/Menu-background-hover-2.png);
}
В то время как html может бытьнашел здесь:
<section id="menu">
<hr id="menu-bar-top" />
<nav>
<div>
<ul>
<li><a href="#">Home</a></li>
<li class="menu-separator"> </li>
<li><a href="#">Lavori svolti</a></li>
<li class="menu-separator"> </li>
<li><a href="#">Balbo e consorzi</a></li>
<li class="menu-separator"> </li>
<li><a href="#">Ciao</a></li>
<li class="menu-separator"> </li>
<li><a href="#">Etc...</a></li>
<li class="menu-separator"> </li>
<li><a href="#">Etc...</a></li>
<li class="menu-separator"> </li>
<li><a href="#">Etc...</a></li>
<!-- ... other Etcs ...-->
</ul>
</div>
</nav>
</section>
Поскольку я думаю, что ul создает мне больше проблем, чем следовало бы, я в порядке с изменением разметки html (обратите внимание, что html5), не имеет значенияесли он кажется немного неправильным (например, используя только div и span).Что мне действительно нужно, так это перекрестное решение, и любые предложения приветствуются.Мне не нужна поддержка Ie6, я в порядке с IE9 и последней версией Chrome, Opera, Safari, Firefox.
Обратите внимание, что фон моего меню и фон эффекта наведения мыши являются градиентами, поэтомуЯ не могу просто использовать цвет.
Спасибо за любые предложения, надеюсь, кто-нибудь может мне помочь с этим, потому что я не могу действительно решить проблему, и я хотел бы избежать различных CSS для браузера.
Редактировать 1: Я не понимаю, почему я не могу сделать высоту разделителя, какой я хочу, я помещаю текст внутрь, но определенно не соответствует нужному мне размеру, это встроенный элемент, ноЯ не могу поместить элемент блока внутрь встроенного элемента: \
Редактировать 2: Хорошо. Я загрузил всю веб-страницу с графикой, в данный момент я не создавал JSFiddle, ноВы можете просмотреть веб-страницу и загрузить ее в виде ZIP-файла:
Просмотреть веб-страницу Загрузить веб-страницу (если вы не доверяетемне просто скачать другой из браузера)
JSFiddle Редактировать 3: Добавлена JS Fiddle, однако я не могу заставить шрифт работать там