css, chrome. ul > li bug? Help cope

Question

css

Greetings.



Problem such:
Made usual to myself such menu div>ul>li all elements of the list — float:left;
Inside each li is a link(s), but it's not about the link.
There is one menu item where a fixed width is needed. When I give it .narrow {width: 150px;} - everything is fine in all browsers. In Chrome, however, the block moves up by 1 pixel... Even if it's empty inside and overflow:hidden... I don't understand what's wrong... I had to find a hack: What would you advise, what could be the matter? And I checked until the width is set - everything is ok. As soon as you set the width, it pops up by 1px. This happens even with an empty li (no link inside, so it has nothing to do with it). DOCTYPE: XHTML 1.0 Strict

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

Answer 1

For all display: inline-block , set vertical-align: top;

Answer 2

All things in these lines
.main-menu li.narrow a {
height: 33px;
line-height: 13px;
padding: 6px 0 0
width: 157px;
}
Try replacing "Clinical Research" with "Clinical". You will immediately understand everything.

Answer 3

Or change the inline-block of the link to block and look for a different way to push 2 words in there.

Answer 4

Firefox 3.6 also has a shift.
It is not entirely clear why there are inline-blockkhaki dances with  inline. All you need is display: tablefor menus, display: blockfor links, and  float: leftfor  LIand  A for IE6/7.