仅在CSS / design，crossbrowser兼容性中使用IE的问题

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!

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

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/ )