CSS – IE7和8个问题

UPDATE

我注意到只有当我使用slideUp / Down时才会出现这种情况。如果我使用show / hide everythings就行了

结束更新

在我的网站我正在开发/设计，我有2个问题。

在IE7中，滑动菜单似乎没有显示，直到我移动鼠标abit。

替代文字http://img27.imageshack.us/img27/4422/7282009105215pm.png

在IE8中，菜单向上滑动后，边距似乎被删除。

替代文字http://img27.imageshack.us/img27/4592/7282009105247pm.png

JS（如​​果需要）

 $（function（）{$（“＃mainNav li：has（ul）> a”）。addClass（“hasMore”）; $（“＃mainNav li”）。hoverIntent（menuOn，menuOff）; $ .each（$ （“＃mainNav a.active”）。parents（“li”），function（）{$（this）.children（“a：first”）。addClass（“active”）;}）; $（“＃mainNav “）.mouseleave（function（）{$（”ul“，this）.slideUp（200）; $（”。open“，this）.removeClass（”open“）;}）;}）;  function menuOn（）{var childUl = $（this）.children（“ul”）;  if（childUl.length）{childUl.slideDown（200）;  $（本）.addClass（ “开放”）;  $（“ul”，$（this）.closest（“li”）。siblings（“li”））。slideUp（200）;  $（本）.closest（ “李”）的兄弟姐妹（ “李先生”）removeClass（ “开放”）。 functionmenuOff（）{} 

CSS

 #mainNav，＃mainNav ul {
     list-style：none;
    填充：0;
    保证金：0;
 }
 #mainNav ul {
     display：none;
 }
 #mainNav li {
    位置：相对;
 }
 #mainNav li ul {
    保证金：2px 0 2px 5px;
     background-color：＃282a33;
 }
 #mainNav a：link，＃mainNav a：visited {
    显示：块;
    填充：5px 10px;
     margin-bottom：2px;
    颜色：＃282a33;
     background-color：＃ffe7a6;
     text-decoration：none;
 }
 #mainNav a：hover，＃mainNav a：active {
     background-color：＃e6c468;
 }
 #mainNav> li.open> a.hasMore {
     background-color：＃e6c468;
 }
 #mainNav> li> a.active {
    颜色：#fff;
     background-color：＃fa8000！important;
     font-weight：bold;
 }
 #mainNav li li a：link，＃mainNav li li a：active，＃mainNav li li a：visited，＃mainNav li li a：hover {
     background-color：透明！重要;
    填充：2px 5px;
     font-family：Georgia，Garamond，“Times New Roman”，serif;
     font-size：11px;
     font-weight：bold;
    白颜色;
 }
 #mainNav li li a：hover，＃mainNav li li a：active {
    颜色：＃ffe7a6;
 }
 #mainNav li li a.active {
    颜色：＃fa8000;
 }
 #mainNav a.hasMore {
     background-image：url（../ images / section_collapsed.png）;
     background-repeat：no-repeat;
    背景位置：右中心;
 }
 #mainNav a.active.hasMore，
 #mainNav a.hasMore：hover，
 #mainNav li li> a.hasMore {
     background-image：url（../ images / section_collapsed2.png）;
 }
 #mainNav li.open> a.active.hasMore，
 #mainNav li.open> a.hasMore {
     background-image：url（../ images / section_expanded2.png）;
 }

Answer 1

这应该解决它…

#mainNav { zoom:1; } 

在IE中阅读有关hasLayout概念的更多信息