修改

Question

我正在为一些朋友编写一个网站，我正在使用ddsmoothmenu进行下拉菜单。但是现在它在标题和正文顶部之间有一个奇怪的间距，它只出现在某些页面上..它非常很奇怪，当通过chromes开发人员选项检查出来时，我简单地找不到这个间距的原因。顺便说一句，我使用的是960克。标题渐变是正文背景图像。

修改

我现在知道问题是什么。 head标签中的所有内容都会移动到正文中，页面上有奇怪的间距。我不知道为什么或如何。

没有奇怪的间距，完全应该如此。 http://i.imgur.com/5cL7W.jpg

奇怪的间距！ http://i.imgur.com/7Gldl.png

以下是其中一个没有错误的页面的渲染源：

<!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"> 
<head> 
    <link rel="icon" type="image/png" href="img/favicon.ico" />
    <title>Armilla - Forside</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
    <meta name="viewport" content="width=960">

<!--//////////////////// 
//Imports - JS and CSS//
/////////////////////--> 
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel='stylesheet' id='style-css'  href='css/diapo.css' type='text/css' media='all'> 
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu-v.css" />
<script type='text/javascript' src='js/jquery.min.js'></script>

<!--[if !IE]><!--><script type='text/javascript' src='js/jquery.mobile-1.0rc2.customized.min.js'></script><!--<![endif]-->
<script type='text/javascript' src='js/jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='js/diapo.js'></script> 
<script type='text/javascript' src='js/ddsmoothmenu.js'></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--///////
//Init JS//
////////-->
<script>

ddsmoothmenu.init({
mainmenuid: "menu", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
});
</script>

</head> 

<body>
<div id="header" class="container_12">
<div id="logo" class="grid_5">
<a href="index.php">
<img src="img/logo.png" width="226" height="65"/>
</a>
</div>
<div id="nav" class="grid_7">
        <div id="menu" class="ddsmoothmenu">
            <ul>

                <li id="prodli"><a href="?p=products"><img src="img/produkter.png"/></a>
                    <ul style="z-index: 1;">
                    <li><a href="?p=prod$type="Armb�nd">Armb�nd</a></li><li><a href="?p=prod$type="Overlevelsesudstyr">Overlevelsesudstyr</a></li>                      </ul>
                </li>
                <li><a href="?p=armilla"><img src="img/armilla.png"/></a></li>
                <li><a href="?p=news"><img src="img/nyheder.png"/></a></li>
                <li><a id="lasta" href="?p=contact"><img src="img/kontakt.png"/></a></li>

            </ul>
            <br style="clear: left" />
        </div>
    </div>
</div>


<section> 
<div style="overflow:hidden; width:960px; margin: auto auto; padding:0 20px;"> 
    <div class="pix_diapo">

        <div data-thumb="img/thumbs/megamind_07.jpg">

            <img src="img/slides/megamind_07.jpg"> 
            <div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ccc; text-transform:uppercase">
                Armilla
            </div>
            <div class="caption elemHover fromLeft" style="padding-top:5px;">
                Verdensklasses overlevelsesudstyr.Tjek vores nye <a href="?p=products">produkter</a> ud
            </div>
        </div>

        <div data-thumb="img/thumbs/wall-e.jpg" data-time="7000">

            <img src="img/slides/wall-e.jpg">
            <div class="elemHover caption fromLeft" style="bottom:70px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px;">
                You can also get the same effect as the caption with:
            </div>
            <div class="elemHover button fromTop" data-easing="easeOutExpo" style="left:388px; bottom:78px;">
                A button
            </div>
            <div class="elemHover button button2 fromBottom" data-easing="easeOutExpo" style="left:512px; bottom:78px;">
                Or two buttons
            </div>

            <div class="elemHover fadeIn" style="left:600px; bottom:auto; top:0; padding-top:50px; color:#ff0; font-size:13px; line-height:20px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background:url(img/demo/arrow_caption.png) no-repeat 230px 30px">
                Or any other html element...<br>
                and you can decide the transition time of any slide
            </div>
        </div>

        <div data-thumb="img/thumbs/up-official-trailer-fake.jpg">
            <iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="img/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>
            <div class="elemHover caption fromLeft elemToHide" style="bottom: 350px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; left:0">

                You can also display videos, but it requires a "fake image"... read the documentation please
            </div>
        </div>

    </div><!-- #pix_diapo -->

</div>
</section> 
<script>
$(function(){
$(".pix_diapo").diapo();
});
</script>
<div id="footer" class="container_12">
<div style="text-align:center; color:#333333;" id="copyright" class="grid_12">
<p>Copyright 2012 &copy; - Armilla.dk - Alle rettigheder forbeholdt Armilla - <a href="?p=admin">Kontrolpanel</a> - <a href="?p=logout">Log ud</a>                                                                                      <br />Webdesign af <a href="http://www.doweb.dk" target="_blank">DoWEB</a></p>

</div>
</div>



</body> 
</html>

Answer 1

这可能是一个 white-space 问题，你的html，css在纸上看起来很不错（在Chrome开发人员中），但是没有解释它应该是。为了检测，如果确实如此，我会解析我的html并删除html问题区域中的所有空格。

如果事实证明是真的，那么这个主题就有各种approaches，尽管大多数人都有一些小缺点（长期丑化的html行，不必要的评论，不常见的换行符......）。 / p>

Answer 2

将我的index.php转换为没有BOM的UTF-8后，空白问题就消失了。所以我现在是一个快乐的露营者！：d

我发现这篇文章讲述了使用Notepad ++时出现在Wordpress中的同样问题。 http://wordpress.org/support/topic/head-scriptslinks-showing-up-inside-body-tag

在ddsmoothmenu的标题上方的空间

修改

2 个答案: