css - Explorer 8,9 标题处的空行

Question

我的网站是 bodto.com.tr。我在资源管理器 8,9 的标题处有一个空行。我一直在寻找可能导致它的原因，因此非常感谢任何反馈。

    <div id="header">
    <div class="headerTop">          
        <div class="headerTopSignIn"></div>          
        <div class="headerTopList">
          <ul>
            <li></li>
          </ul>
        </div>
        <div class="headerSearch">
          <asp:Panel id="searchPanel" runat="server" DefaultButton="searchButton">
              <asp:TextBox id="searchBox" runat="server"/>
              <asp:Button id="searchButton" runat="server" OnClick="Search_Click" Text=""/>
          </asp:Panel>                            
      </div>
    </div>
    <div><a href="/"><img src="/images/image.png" width="288" height="70" alt=""/></a></div>
    <div class="headerLogoOthers">
        <a href=""><img alt="" title="" src="/images/tb.png" /></a>
        <a href=""><img alt="" title="" src="/images/ts.png" /></a>
        <a href=""><img alt="" title="" src="/images/oib.png" /></a>                
    </div>
    <div id="LanguageSelector">
        <form method="get" action="/"><select id="LanguageDropDownList" name="lang"  onchange="javascript:location='/?lang=' + this.options[this.selectedIndex].value" ><option value="en">English (en)</option><option value="tr" selected="selected" >Türkçe (tr)</option></select><noscript><input type="submit" value=">"></noscript></form>
    </div>
    <div id="mainmenu">
        <ul class="topNavigation"><li class=""><a href="/b.aspx?lang=tr" title=""></a></li><li class=""><a href="/bd.aspx?lang=tr" title=""></a></li></ul>
    </div>
</div>

这是CSS

#header {margin-bottom: 20px;position: relative;}
#header a,#header a img{border: none;}
#header #sitedescription{float: right;text-align: right;margin: 7px;}
#header #sitedescription h1 {font-weight: normal;position: relative;font-size: 16px;line-height: 0.5em;} 
#header #mainmenu{margin: 0px;padding: 0px;}
#header .mainmenucorner{margin: 0px;padding: 0px;background: url(/images/mainmenu_corner.gif) top left no-repeat;height: 20px;clear: both;position: relative;top: -15px;left: -25px;width: 20px;margin-bottom: -40px;}
#header #mainmenu ul{width: 950px;float: left;margin-bottom: 15px;/*margin-top: 20px; */padding: 0px;//margin-left: -25px;}
#header #mainmenu ul li{list-style: none;background-image: url(/images/icons/mainmenu_itembg.png);background-position: right bottom;background-repeat: no-repeat;float: left;font-size: 14px;}
#header #mainmenu ul li a{padding: 15px 15px;display: block;color: #fff;text-decoration: none;background: url(/images/mainmenu_item_bottomshadow.jpg) bottom left no-repeat;margin-bottom: -13px;padding-bottom: 28px;}
#header #mainmenu ul li.current{background-color: #a9a4a3;}
#header #mainmenu ul li.home a{background-image: url(/images/icons/home_dark.png);background-position: 16px 16px;background-repeat: no-repeat;padding-left: 35px;  }
#header #mainmenu ul li:hover{color: #FFF;text-decoration: none;background-color: #a9a4a3;}
.headerTop { overflow hidden; height: 27px; font-size: 0; margin-bottom: 10px; position: relative; color: #005AAB; font-size: 12px;  border-bottom:1px solid #d5d5d5; }
.headerTopSignIn { width: 350px; margin-top: 5px; position: absolute; left: 0px;}
.headerTopSignIn a { color: #FECA08; }
.headerTopList ul{ margin-top: 5px; padding: 0; position: absolute; left: 400px;}
.headerTopList ul li{ display: inline; }
.headerTopList ul li a { border: none; padding: 15px; color: #FECA08; background-image: url(/images/arrow.png); background-repeat: no-repeat; background-position: left center; text-decoration: none; }
.headerTopList ul li a:hover { padding: 15px; background-image: url(/images/arrow_hover.png); background-repeat: no-repeat; background-position: left center; text-decoration: none; }
.headerLogo img { }        
.headerSearch { padding-left: 20px; position: absolute; top: 0; right: 0; }
.headerLogoOthers { position: absolute; float:left; margin: 5px; top: 50px; right: 0; }
#LanguageSelector{float:right; margin: 0; padding: 0; }

将 margin-bottom: 0 设置为 #header 后，我看到了一些奇怪的东西。

1- 更改为页眉底部边距之前:0， Before changing

2- 更改为页眉后 After changing

这是CSS

/* *** FLASH *** */
#flash { height: 437px; float: left; }

/* *** FLASH CONTENT *** */
#flashcontent { width: 660px; float: left; }

/* *** SIDEBAR FLASH *** */    
.sidebarFlash { font-size: 12px; width: 285px; height: 400px; margin-left: 5px; float: left; background-color: #FECA08; overflow: hidden; }
.sidebarFlash span.header { padding: 2px; color: #FECA08; background:#000000; display:block;}
.sidebarInnerTop { height: 240px; padding: 5px; background-color: #FECA08; }

.sidebarInnerTop h1 { padding: 5px 0 5px 20px; background-image: url(/images/icons/arrow2_se.png); background-position: left center; background-repeat: no-repeat; }
.sidebarInnerTopMenuNav { padding-left: 0; margin-left: 0; list-style-type: none; background-color: #FFF; }
.sidebarInnerTopMenuNav li { }
.sidebarInnerTopMenuNav li a {  padding: 8px 15px 8px 20px; border-bottom: 1px dotted gray; display: block; background-image: url(/images/arrow.png); background-repeat: no-repeat; background-position: left center; text-decoration: none; }
.sidebarInnerTopMenuNav li a:hover { background:#595E6A none repeat scroll 0 0; background-image: url(/images/arrow_hover.png); background-repeat: no-repeat; background-position: left center; text-decoration: underline; }

.sidebarInnerTopMenuNavSub { padding: 0; margin: 0; background-color: #FFF; }
.sidebarInnerTopMenuNavSub li { list-style: none; }
.sidebarInnerTopMenuNavSub li a {  padding: 8px 15px 8px 20px; border-bottom: 1px dotted gray; display: block; background-image: url(/images/arrow.png); background-repeat: no-repeat; background-position: left center; text-decoration: none; }
.sidebarInnerTopMenuNavSub li a:hover { background:#595E6A none repeat scroll 0 0; background-image: url(/images/arrow_hover.png); background-repeat: no-repeat; background-position: left center; text-decoration: underline; }

.sidebarInnerBottom { overflow: hidden; }
.sidebarInnerBottom span.header { padding: 2px; color: #FECA08; background:#000000; display:block;}

Answer 1

在 #header div 上设置 margin-bottom: 0 可以解决这个问题。