0

这是我的 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，我可以使用条件注释来解决这个问题）：

在此处输入图像描述

在 Chrome 中，我看到它是因为我希望所有浏览器都呈现它（像往常一样，只有 Chrome 真正做到了）：

在此处输入图像描述

这个空白是从哪里来的？我该怎么做才能摆脱它，跨浏览器？（如果相关的话，我还必须遵守 IE8）。

4

2 回答 2

1

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

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

.DDL img
{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
}
于 2013-05-01T22:17:13.857 回答
0

出于某种原因，#btnWrapper在 IE 和 FF 中，div 被迫具有比所需更大的行高。添加（最多）0.7em 的行高被证明可以关闭空白（有点有趣，因为实际按钮本身（包含在#btnWrapperdiv 中）以 1.3em 的行高呈现，所以这不会对我来说真的很有意义，但是......）。

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

#btnWrapper
{
    white-space: nowrap;
    overflow: hidden;
    margin: 0px;
    line-height: .7em;
}
于 2013-05-02T13:59:37.503 回答