Question

我正在努力使网站的每个页面上的功能都在单独的HTML文件中。我制作了一个header.html文件：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>header</title>
<link href="../css/default.css" rel="stylesheet" type="text/css" />
<link href="../css/inc/header.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="identityAndLinksHeader">
  <table>
    <tr>
      <td><a>Home</a></td>
      <td><a>About</a></td>
      <td><a>Privacy</a></td>
    </tr>
  </table>
</div>
</body>
</html>

以下CSS：

@charset "utf-8";
/* CSS Document */
#identityAndLinksHeader
{
    height: 50px;
    width: 100%;
    margin: 0, 0, 0, 0;
    padding: 0, 0, 0, 0;
    background-color: rgba(127, 140, 141,1.0);
}

该文件工作正常，看起来像这样： http://puu.sh/68SbK.png

然后我有了这个index.html代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>

<body>
<object name="header" type="text/html" data="inc/header.html"></object>
</body>
</html>

然而，当我运行它时，标题看起来像这样： http://puu.sh/68S9M.png

有谁知道为什么会这样？谢谢！

Answer 1

首先，你不需要在html5中定义type =“text / css” 第二个#identityAndLinksHeader的宽度是100％，也许在index.html中，小面积是100％。

Answer 2

对象标签的大小非常大。尝试将其宽度设置为页面的宽度。

包含的HTML / CSS通过<object>未正确显示</object>

2 个答案: