资源管理器 8,9 上标题处的空行

发布于 2024-12-03 11:11:31 字数 6685 浏览 0 评论 0原文

我的网站是 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>

这是将 margin-bottom: 0 设置为 #header 后的 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; }

,我看到一些奇怪的东西。

1- 更改为 header margin-bottom: 0 之前, 更改之前

2-更改标题后 更改后

这是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;}

My website is bodto.com.tr. I have a empty line at header on explorer 8,9. I have been searching what might cause it so any feedback much appreciated.

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

Here is the 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; }

After setting margin-bottom: 0 to #header, I see something weird.

1- before changing to header margin-bottom: 0,
Before changing

2- after changing to header
After changing

Here is the 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;}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

等风也等你 2024-12-10 11:11:31

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

Setting margin-bottom: 0 on your #header div fixes the problem.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文