爲什麼除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之間仍有空白區域？

回答

相關問題