Issue with IE only in CSS/design, crossbrowser compatibility

Question

This question is based on this JSFiddle. It is a navigation design with two top level menu items and three submenus (structured for accessibility without script). An element to look at may be:

 <nav class="top-menu">

There is one pressing issue:

1. Just open the JSFiddle in Internet Explorer and see. Why does it drop down like that only in IE? Even in IE9 and 10.

Any help here will be greatly appreciated!

• Niet the Dark Absol: This is a common problem with zooming by an amount that is not a power of 2. For instance, you'll notice that the alignment issue is fixed at 50% zoom. Personally I wouldn't worry too much about it.
• gorn: @Kolink In some cases the displacement is visible without zooming. At this point I'm fanatic about correcting it :)
• Cody Guldner: When I look at it in IE9 it doesn't look bad. Unless if you are talking about the arrow
• dmc: I'm with Kolink, IE isn't worth worrying about. It's a POS.
• Arman: dmc, while that may entirely be true, that's a poor way of looking at a design problem.. People (albeit those who know no better) still use IE, so thus, it has to be taken into account. ... ... OR at the very least given an IE-only splash screen with a Chrome download option.

Answer 1

I have noticed that "top-header" blocks had different heights, and to fix this I've added line-height CSS rule:

.top-header {
 padding: 0 0 5px 0;
 display: inline-block;
 margin-left: 20px;
 position: relative;
 + line-height: 28px; 
}

And it currently seems same for me in IE and Chrome.

Updated fiddle

• Matt Berkowitz: Poking around in the browsers respective developer tools IE reports the computed height of .top-header in IE is 36.8px while in Chrome it is 29px. Setting line-height as mishik suggests fixes the problem or you could set height:29px as well

Answer 2

add

height :136px 0円/;

at the end of .top-header and the problem will be solved check jsfiddle

Answer 3

You may use some 'tape' to fix this in IE. :)

Via CC, add a border-bottom: white 10px solid; or outline:white 10px solid; http://jsfiddle.net/SKJvv/7/ http://jsfiddle.net/SKJvv/8/

It doesn't explain much what layout is playing about.

(CC included : http://jsfiddle.net/SKJvv/10/ )