html .loads具有很大的余量

由 发布于

我写了这个index.html，并强迫它使用jQuery加载标头：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hannelore Fischer</title>
<link href="ressourcen/css.css" rel="stylesheet" type="text/css">
<script src="ressourcen/jquery.js"></script>
</head>

<body>
    <header>
        <ol id="header"></ol>

        <script>
        $( "#header" ).load( "ressourcen/allgemein.html" );
        </script>
    </header>
</body>
</html>

ressourcen / allgemein.html看起来像这样：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Allgemein</title>

<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="header">
    <div style="padding: 0; margin: 0px; background: #D3C6FF 0% 0% no-repeat padding-box; opacity: 1; top: 0px; width: 100%; height: 276px;">
        <div style="padding-top: 43px; height: 46px;text-align: center; font: Bold 60px/99px Eternate; letter-spacing: 0px; color: #000000; opacity: 1;">Hannelore Fischer</div>
        <div style="padding-top: 86px; height: 18px; text-align: center; font: Italic 18px/29px PensumPro-BookItalic; letter-spacing: 0px; color: #000000; opacity: 1;"><a href="index.html" tabindex="1" title="Aktuelles" accesskey="1">Aktuelles</a>&nbsp; &nbsp; &nbsp; <a href="buecher.html" tabindex="2" title="Bücher" accesskey="2">Bücher</a>&nbsp; &nbsp; &nbsp; <a href="texte.html" tabindex="3" title="Texte" accesskey="3">Texte</a>&nbsp; &nbsp; &nbsp; <a href="biographie.html" tabindex="4" title="Biographie" accesskey="4">Biographie</a></div>
    </div>
    <div style="margin-top: -49px; height: 49px; background: #F4F4F4 0% 0% no-repeat padding-box; box-shadow: 0px -20px 16px #0000000A; opacity: 1;">
    </div>
    </div>
</body>
</html>

尝试时，html在右侧和顶部创建了很大的空白！我无法解释原因，因为在原始html上不会发生... 有人知道解决方案吗？感谢您调查:)