为什么除Chrome之外，所有浏览器中的这些div之间仍有空白区域？

这里是我的HTML：为什么除Chrome之外，所有浏览器中的这些div之间仍有空白区域？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=9" /> 
     <title>Okmulgee Online</title> 
     <base href="/home.cshtml" /> 
     <link href="/Styles/main.css" rel="Stylesheet" type="text/css" media="screen" /> 
     <![if ! lte IE 8]><link href="/Styles/not_lte_IE8.css" rel="Stylesheet" type="text/css" media="screen" /><![endif]> 
     <!--[if lte IE 8]><link href="/Styles/lte_IE8.css" rel="Stylesheet" type="text/css" media="screen" /><![endif]--> 
     <link href="/Plugins/jquery-ui.css" rel="Stylesheet" type="text/css" /> 
     <link href="/Images/Site_Icon/Scribe.ico" rel="shortcut icon" type="image/x-icon" /> 

     <script src="/Resources/jquery-1.9.1.min.js" type="text/javascript"></script> 
     <script src="/Plugins/jquery.maskedinput-1.3.min.js" type="text/javascript"></script> 
     <script src="/Plugins/jquery-ui.min.js" type="text/javascript"></script> 
     <script src="/Plugins/accounting.min.js" type="text/javascript"></script> 
     <script src="/Scripts/PluginConfigurations.js" type="text/javascript"></script> 
     <script src="/Scripts/main.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <div id="topBar"></div> 
     <div id="mainWrapper"> 
      <div id="bannerBar"></span><img alt="Okmulgee Banner Image" src="/Images/City_Images/banner.jpg" /></div> 
      <img id="colorFade" alt="Color Fading Background Image" src="/Images/Background_Images/GreenFadeBackground.jpg" /> 
      <div id="btnWrapper"> 
        <!--Buttons For Visitor Type Drop Down Links *START*--> 
       <div id="residentsDDL" class="DDL visType residentsDD"><img src="/Images/Background_Images/BrownButton.jpg" alt="Btn Img" /><div class="btnText">Residents</div></div><!-- 
      --><div id="businessesDDL" class="DDL visType businessesDD"><img src="/Images/Background_Images/BrownButton.jpg" alt="Btn Img" /><div class="btnText">Businesses</div></div><!-- 
      --><div id="visitorsDDL" class="DDL visType"><img src="/Images/Background_Images/BrownButton.jpg" alt="Btn Img" /><div class="btnText">Visitors</div></div><!-- 
        <!--Buttons For Visitor Type Drop Down Links *END*--><!-- 
        <!--Buttons For Category Type Drop Down Links *START*--><!-- 
      --><div id="cityDDL" class="DDL groupType"><img src="/Images/Background_Images/GreyButton.jpg" alt="Btn Img" /><div class="btnText">City of Okmulgee</div></div><!-- 
      --><div id="mainStreetDDL" class="DDL groupType"><img src="/Images/Background_Images/GreyButton.jpg" alt="Btn Img" /><div class="btnText">Main Street</div></div><!-- 
      --><div id="organizationsDDL" class="DDL groupType"><img src="/Images/Background_Images/GreyButton.jpg" alt="Btn Img" /><div class="btnText">Organizations</div></div><!-- 
      --><div id="oadcDDL" class="DDL groupType"><img src="/Images/Background_Images/GreyButton.jpg" alt="Btn Img" /><div class="btnText">OADC</div></div> 
        <!--Buttons For Category Type Drop Down Links *END*--> 
      </div><!-- 
     --><div id="DBWrapper"> 
       <div class="DDB residentsDD" id="residentsDDB">Goo'day Mate!</div><!-- 
      --><div class="DDB businessesDD" id="businessesDDB"></div> 
      </div> 




      <p class="footer">&copy; 2013 City Of Okmulgee. All rights reserved.</p> 
     </div> 
    </body> 
</html>

和我的CSS：

body 
{ 
    width: 100%; 
    margin: auto; 
} 

#topBar 
{ 
    width: 100%; 
    height: 8px; 
    background-color: #57bf2a; 
    margin: auto; 
} 

div#bannerBar 
{ 
    height: 150px; 
    width: 100%; 
    margin: auto; 
    height: 150px; 
    background-color: #fff; 
} 

div#bannerBar img 
{ 
    width: 100%; 
    height: 100%; 
} 

div#mainWrapper 
{ 
    width: 75%; 
    width: 840px; 
    margin: auto; 
    margin-top: 50px; 
    background-color: #fff; 
    border: 1px solid #000; 
    border-radius: 5px 5px 5px 5px; 
    -moz-box-shadow: 10px 10px 5px #888; 
    -webkit-box-shadow: 10px 10px 5px #888; 
    box-shadow: 10px 10px 5px #888; 
    behavior: url(/Resources/PIE.htc); 
    /*Delete This*/height: 600px; 
} 

p.footer 
{ 
    text-align: center; 
    padding-top: 5px; 
    font-size: .8em; 
} 

img#colorFade 
{ 
    height: 35px; 
    width: 100%; 
} 

.DDL 
{ 
    position: relative; 
    width: 119px; 
    overflow: hidden; 
    display: inline-block; 
    white-space: nowrap; 
    overflow: hidden; 
    line-height: 1.3em; 
} 

.DDL img 
{ 
    position: absolute; 
    vertical-align: bottom; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
} 

.DDL.visType 
{ 
    background-color: #bb9191; 
    border-right: 2px inset #9d6f6f; 
    color: #37691f; 
} 

.DDL.groupType 
{ 
    background-color: #6b6b6b; 
    border-right: 2px inset #4b4b4b; 
    color: #0b3773; 
} 

.DDL .btnText 
{ 
    position: relative; 
    z-index: 2; 
    text-align: center; 
    /*font-family: Tahoma, Geneva, sans-serif;*/ 
    /*font-family: Impact, Charcoal, sans-serif;*/ 
    font-family: Georgia, Serif; 
    font-size: .7em; /*was .9*/ 
    font-weight: bolder; 
    padding: 7px 0px; 
    width: 100%; 
    margin: 0px; 
} 

.btnText:hover 
{ 
    color: #fff; 
} 

.DDL:hover 
{ 
    cursor: pointer; 
    background-color: #63bf5f; 
} 

.DDL img 
{ 
    opacity: .6; 
    filter: alpha(opacity = 60); 
} 

#oadcDDL 
{ 
    border-right: none; 
} 

#btnWrapper 
{ 
    white-space: nowrap; 
    overflow: hidden; 
    margin: 0px; 
} 

#DBWrapper 
{ 
    position: relative; 
    margin: 0px; 
} 

.DDB 
{ 
    background-color: #63bf5f; 
    border: 1px solid #555; 
    margin: 0px; 
} 

#residentsDDB 
{ 
    display: none; 
    position: absolute; 
    height: 200px; 
    width: 300px; 
    border-left: 0px none; 
} 

#businessesDDB 
{ 
    display: none; 
    position: absolute; 
    left: 60px; 
    height: 200px; 
    width: 300px; 
}

和我的js文件：

jQuery(function ($) { 
    //Broken image error handling 
    $("img").error(function() { 
     $(this).hide(); 
    }); 

    //ddl functions 
    $(".DDL").mouseover(function() { 
     //$(this).find("img").css("display", "none"); 
     $(this).find("img").css("visibility", "hidden"); 
    }); 
    $(".DDL").mouseout(function() { 
     //$(this).find("img").css("display", "initial"); 
     $(this).find("img").css("visibility", "visible"); 
    }); 

    //residentsDDL Control 
    $("#residentsDDL").mouseover(function() { 
     $("#residentsDDB").css("display", "block"); 
    }); 
    $(".residentsDD").mouseover(function() { 
     $("#residentsDDB").css("display", "block"); 
     $("#residentsDDL").css("background-color", "#63bf5f"); 
     $("#residentsDDL").find("img").css("visibility", "hidden"); 

    }); 
    $(".residentsDD").mouseout(function() { 
     $("#residentsDDB").css("display", "none"); 
     $("#residentsDDL").find("img").css("visibility", "visible"); 
     $("#residentsDDL").css("background-color", "#bb9191"); 
    }); 

    //businessesDDL Control 
    $("#businessesDDL").mouseover(function() { 
     $("#businessesDDB").css("display", "block"); 
    }); 
    $(".businessesDD").mouseover(function() { 
     $("#businessesDDB").css("display", "block"); 
     $("#businessesDDL").css("background-color", "#63bf5f"); 
     $("#businessesDDL").find("img").css("visibility", "hidden"); 

    }); 
    $(".businessesDD").mouseout(function() { 
     $("#businessesDDB").css("display", "none"); 
     $("#businessesDDL").find("img").css("visibility", "visible"); 
     $("#businessesDDL").css("background-color", "#bb9191"); 
    }); 
});

我恨张贴了这么多的代码这很简单，但正如你所看到的，我拥有通过在div之间放置html注释，消除了相关元素之间的空白区域。我也保证没有任何相关元素的边距，但是我仍然在IE和Firefox中看到这一点（如果它只是IE，我可以使用条件注释来解决这个问题）：

enter image description here

虽然在Chrome中，我看到它，我想所有的浏览器渲染它（像往常一样，只有铬真正得到它的权利）：

enter image description here

在哪里这个白色空间是从哪里来的？我能做些什么来摆脱它，跨浏览器？（我必须坚持IE8，如果这是相关的）。

来源

2013-05-01 VoidKing

你有与菜单的问题链接到有效的网站？ – Supplement 2013-05-01 21:56:57

@Supplement它还不是一个工作网站。它在建设中。 – VoidKing 2013-05-01 21:57:23

将您的代码放在小提琴中，以便我们可以看到您的问题。 – Terry 2013-05-01 22:05:25

出于某种原因，#btnWrapper DIV被迫具有更大的line-height比在IE和FF必要的。添加（至多）.7em的行高证明会关闭空白区域（这很有趣，因为实际的按钮本身（包含在#btnWrapper div内）以1.3em的行高渲染，所以这使得对我来说没有真正意义，但是......）。

因此，在短期我只是简单地添加上述财产的#btnWrapper规则，就像这样：

#btnWrapper 
{ 
    white-space: nowrap; 
    overflow: hidden; 
    margin: 0px; 
    line-height: .7em; 
}

来源

2013-05-02 13:59:37 VoidKing

这可能是因为您的图像使用默认的display: inline属性，该属性会将图像的行高应用于图像，通常会导致图像底部出现一些空白。

尝试增加display: block到.DDL img：

.DDL img 
{ 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    display: block; 
}

来源

2013-05-01 22:17:13 sbeliv01

那，或者'vertical-align：bottom'。 – ACJ 2013-05-01 22:35:06

这个答案没有解决问题。添加'display：block'（甚至尝试'vertical-align：bottom'）显示这个页面的显示没有任何变化。我将编辑我的帖子，现在包括所有的HTML和CSS。感谢您的尝试！ – VoidKing 2013-05-02 13:26:42

此外，我想你会需要我的jQuery使其正常工作，所以我现在将它添加到我的帖子中。 – VoidKing 2013-05-02 13:40:59

为什么除Chrome之外，所有浏览器中的这些div之间仍有空白区域？

回答

相关问题