Trình đơn CSS Vấn đề IE7

Question

Menu hoạt động trên tất cả các trình duyệt chính nhưng có vẻ khác trong IE7. Xem ảnh chụp màn hình dưới đây.
Kiểm tra bản trình diễn tại http://jsfiddle.net/FQLdm/6/

Khi bạn di chuột qua liên kết trang chủ, bạn sẽ thấy menu phụ. Trong IE7, cả nút menu và menu phụ đều được đẩy lên.

Điều này xảy ra khi tôi thay thế này

.menu1 ul.menu li{ 
    position: relative; 
    list-style-type: none; 
    display:block; 
    float:left; 
} 

với này (tôi cần phải sử dụng cách này inline-block để tập trung các mục danh sách)

.menu1 ul.menu li{ 
    position: relative; 
    list-style-type: none; 
    display:inline; 
    display:inline-block; 
    *display:inline; /*IE7*/ 
    *zoom:1; /*IE7*/ 
} 

Trong Chrome có vẻ tốt đẹp

Trong IE7 có vẻ khác. Lưu ý cách nút home được nâng lên. nó sẽ trông giống như ảnh chụp màn hình chrome ở trên.

Answer 1

Viết vertical-align:middle trong số li. Như thế này:

.menu1 ul.menu li{ 
    vertical-align:middle; 
    position: relative; 
    list-style-type: none; 
    display:inline; 
    display:inline-block; 
    *display:inline; /*IE7*/ 
    *zoom:1; /*IE7*/ 

} 

Answer 2

một cái gì đó như thế này

đặt nó trong tập tin html xưa trong đầu

<!--[if lte IE 7]> 
    <style> 
    .menu1 ul li ul { 
     position:absolute; 
     top: 5px or 10px; 
    } 
    .menu1 { 
     position: relative; 
    } 
    </style>   
<![endif]--> 

Answer 3

Ví dụ hoạt động tốt trên IE7 trên máy tính của tôi.

Answer 4

Consult câu trả lời này: IE6 extra padding on bottom

Ngoài ra, không thiết display:block đôi khi có thể gây ra các vấn đề đệm, như nó đã làm cho tôi một lần. Hãy thử thêm điều đó vào CSS để xem có cải thiện gì không.