横幅和导航菜单之间有额外的空白间距

4
中标题栏的横幅图片高度为130像素,但总高度显示为135像素。我找不到这多出来的空间是从哪里来的。请问是什么原因造成的?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Taft Power Equipment</title>
        <link rel="stylesheet" type="text/css" href="js\jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <!--[if lt IE 7]>
            <link rel="stylesheet" type="text/css" href="style-ie.css" />
        <![endif]-->
        <script type="text/javascript" language="Javascript" src="js\jquery.min.js"></script>
        <script src="js/jquery.horizontalNav.js"></script>
        <script src="js\jquery-migrate-1.2.1.js"></script>
        <script>
            // When document is ready...
            $(document).ready(function() {
                $('.full-width').horizontalNav({}); // Call horizontalNav on the navigations wrapping element
                $("#main-content").load("home.html");
            });
        </script>
        <script>
            $(document).ready(function() {
                $("#home").click(function() {
                    $("#main-content").load("home.html");
                });
                $("#work").click(function() {
                    $("#main-content").load("work.html");
                });
                $("#blog").click(function() {
                    $("#main-content").load("blog.html");
                });
                $("#about").click(function() {
                    $("#main-content").load("about.html");
                });
                $("#contact").click(function() {
                    $("#main-content").load("contact.html");
                });
                $("#parts").click(function() {
                    $("#main-content").load("parts.html");
                });
                $("#people").click(function() {
                    $("#main-content").load("people.html");
                });
            });
        </script>
        <script>
            $(function() {
                $("button").button()
                    .click(function(event) {
                    event.preventDefault();
                });
            });
        </script>
        <script>
            function showParts(str) {
                if (str == "") {
                    document.getElementById("results").innerHTML = "";
                    return;
                }
                if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else { // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("results").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "partsearch_2.php?q=" + str, true);
                xmlhttp.send();
            }
        </script>
        <script>
            function showPeople(str) {
                if (str == "") {
                    document.getElementById("results").innerHTML = "";
                    return;
                }
                if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else { // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("results").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "peoplesearch.php?q=" + str, true);
                xmlhttp.send();
            }
        </script>
    </head>

    <body>
        <div id="page-wrap">
            <div id="inside">
                <div id="header">
                    <img src="images/taft_banner_960_blackandwhite.png" />
                </div>
                <div id="menu">
                    <nav class="horizontal-nav full-width horizontalNav-notprocessed">
                        <ul>
                            <li><a href="#" id="home">Home</a>

                            </li>
                            <li><a href="#" id="work">Work</a>

                            </li>
                            <li><a href="#" id="blog">Blog</a>

                            </li>
                            <li><a href="#" id="about">About</a>

                            </li>
                            <li><a href="#" id="contact">Contact</a>

                            </li>
                            <li><a href="#" id="parts">Parts Look Up</a>

                            </li>
                            <li><a href="#" id="people">People</a>

                            </li>
                        </ul>
                    </nav>
                </div>
                <div id="main-content"></div>
                <div id="footer">
                    <p>&copy Copy Right Taft Power Equipment Corp</p>
                </div>
            </div>
    </body>

</html>

* {

    margin: 0;

    padding: 0;

}

html, body {

    margin:0;

    padding-top:0;

    height:100%;

}

p, li {

}

a {

}

b {

}

table {

    border-collapse: collapse;

    /* 'cellspacing' equivalent */

}

table th {

    font: 1.5em Tahoma;

    border: 3px solid #0e7079;

    border-radius: 6px;

    padding: 0em 1em 0em 1em;

}

table td {

    font: 1.3em sans-serif;

    border-radius: 1px;

    border: 0px solid #0e7079;

    padding: 0 1em 0 1em;

}

h1 {

    font: 2.0em Tahoma, sans-serif;

    color: white;

    height: 0px;

}

h2 {

    font: 1.8em Tahoma, sans-serif;

    color: green;

    margin-bottom: 10px;

}

ul {

    margin-left: 0px;

}

img {

    border: none;

}

/* ========================================================================================== */

#page-wrap {

    !margin: 10px auto;

    display: inline;

}

#inside {

    width: 960px;

    margin: 0 auto;

    background: blue;

    min-height:100%;

    position:relative;

}

#searchbar {

    width: 30%;

    background: #747474;

    border: 1px solid red;

    display: inline-block;

}

#results {

    background: #4c4c4c;

    min-height: 100px;

    width:50%;

    display: inline-block;

    border-radius: 6px;

    border: 1px solid #0e7079;

}

#results b {

    font: 2.0em Tahoma, sans-serif;

    color: white;

    height: 0px;

}

#main-content {

    margin-bottom: 10px;

    padding:10px;

    padding-bottom:30px;

    /* Height of the footer */

}

#header {

}

#menu {

}

#left-sidebar {

    width: 150px;

    float: left;

    padding-left: 15px;

    padding-top: 20px;

}

#footer {

    background: #000000;

    text-align: center;

    padding-top: 0px;

    color: white;

    position:absolute;

    bottom:0;

    width:960px;

    height:30px;

    /* Height of the footer */

}

/* ========================================================================================== */

.horizontal-nav {

    background: #efefef;

    border-radius: 6px;

}

.horizontal-nav ul {

    background: #ff4505;

    float: left;

    text-align: center;

    border-radius: 6px;

    border: 0px solid #0e7079;

    margin-left: 0px;

}

.horizontal-nav ul li {

    float: left;

    border-left: 1px solid #0e7079;

}

.horizontal-nav ul li:first-child {

    border-left: 0 none;

}

.horizontal-nav ul li a {

    display: block;

    padding: 10px 20px;

    color: #fff;

    border-top: 1px solid rgba(255, 255, 255, 0.25);

    border-left: 1px solid rgba(255, 255, 255, 0.25);

    text-decoration: none;

}

.horizontal-nav ul li:first-child a {

    border-left: 0 none;

}

.horizontal-nav ul li a:hover {

    background: #12808a;

}

.horizontal-nav ul li:first-child a {

    border-top-left-radius: 6px;

    border-bottom-left-radius: 6px;

}

.horizontal-nav ul li:last-child a {

    border-top-right-radius: 6px;

    border-bottom-right-radius: 6px;

}

http://jsfiddle.net/5b48H/

Thank you!

2个回答

1

要么在 img 元素中添加 display:blockvertical-align:top

jsFiddle示例 - display:block

#header img {
    display:block;
}

jsFiddle示例 - vertical-align:top

#header img {
    vertical-align:top;
}

注意 - 默认的 vertical-align 属性是基线(baseline)。将其更改为 top、middle 或 bottom 可以解决问题。

1
如果您可以将图像的显示样式设置为块,那么应该可以解决问题。将垂直对齐设置为底部或中间也可以起作用。我认为问题是因为Firefox尝试定位内联图像,使其底部边缘与文本基线对齐,因此图像下方有文本下降字母的空间。source
header img
{
    display: block;
    margin: 0;
    padding: 0;
}

我相信在图像上设置line-height: 1;也可以解决这个问题,特别是如果它是独立的块。 来源

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接