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

时间：2013-05-01 21:53:13

标签： html css cross-browser

这是我的HTML： 

<!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中，我看到它，因为我希望所有浏览器都能呈现它（就像往常一样，只有Chrome才能正确使用它）：

enter image description here

这个白色空间来自哪里？我可以做些什么来摆脱它，跨浏览器？ （如果相关，我还必须遵守IE8。）

2 个答案:

答案 0 :(得分：1)

这可能是因为您的图片使用了默认的display: inline属性，该属性将行高应用于图像，通常会在图像底部产生一些空格。

尝试将display: block添加到.DDL img：

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

答案 1 :(得分：0)

出于某种原因，#btnWrapper div被迫拥有比IE和FF中更高的行高。添加（最多）.7em的行高证明了关闭空白区域（有点搞笑，因为实际的按钮本身（包含在#btnWrapper div中）的行高为1.3em ，所以这对我来说没有任何意义，但......）。

所以简而言之，我只是将所述属性添加到#btnWrapper规则中，如下所示：

#btnWrapper
{
    white-space: nowrap;
    overflow: hidden;
    margin: 0px;
    line-height: .7em;
}
相关问题
最新问题