css, chrome. ul > li bug? Помогите справиться

Question

[3ds]

Приветствую.



Проблема такая:
Сделал обычное себе такое меню div>ul>li все элементы списка — float:left;
Внутри каждого li — ссылка (а), но дело не в ссылке.
Есть один пункт меню где нужна фиксированная ширина. Когда я задаю ему .narrow {width: 150px;} — во всех браузерах все нормально. В Хроме же — блок сдвигается на 1 пиксель вверх… Даже если внутри пусто и overflow:hidden… Не пойму в чем дело… Пришлось найти хак:

@media screen and (-webkit-min-device-pixel-ratio:0)
{
.main-menu li.narrow
{
margin-top: 1px;
}
}

Что посоветуете, в чем может быть дело? Причем я проверил пока ширина не задана — все ок. Как только задаешь ширину — вылазит вверх на 1px.
Это происходит даже при пустом li (без ссылки внутри, следовательно она не при чем). DOCTYPE: XHTML 1.0 Strict

Comments

[homm]

Посоветую выложить пример, на котором видно будет проблему.

[3ds]

Вот ссылка testgr.netkam.lgg.ru/ Но в там с хаком уже (вышеописанным) поэтому работает. Подозрение на haslayout т.е. width проставляю но почему на 1px вверх?!

Answer 1

[homm]

Для всех display: inline-block задайте vertical-align: top;

Comments

[3ds]

Спасибо! Для ссылки поставил v-a и все стало нормально!
.main-menu li a { vertical-align: top;}

Answer 2

[Олег Савватеев]

Все дела в этих строчках

.main-menu li.narrow a {
height: 33px;
line-height: 13px;
padding: 6px 0 0;
width: 157px;
}

Попробуйте заменить «Клинические исследования» на «Клинические». Сразу все поймете.

Comments

[3ds]

не могу согласиться ставим:

.main-menu li.narrow a {display:none} /* ссылка вообще убирается */

ставим li фон — потому что он прозрачный до этого был.
.main-menu li.narrow { background: #2cb671;}

и комментируем хак для хрома

/*@media screen and (-webkit-min-device-pixel-ratio:0)
{
.main-menu li.narrow
{
margin-top: 1px;
}
}*/

вуоля — все по прежнему — li выпирает на пиксель вверх…

Answer 3

[Николай Васильчук]

Либо меняйте inline-block у ссылки на block и ищите как втолкать туда 2 слова по-другому.

Comments

[Николай Васильчук]

Собственно и искать то не надо. Просто убирайте свой хак и меняйте inline-block на block для ссылок.

Answer 4

[MT]

В Firefox 3.6 тоже есть сдвиг.

Не вполне ясно, зачем там inline-block и хаки-пляски с inline. Всё, что вам нужно — это display: table для меню, display: block для ссылок и float: left для LI и A — для IE6/7.

Comments

[3ds]

Можно подробней?

[MT]

Что именно неясно?