css - HTML/CSS Div 扩展到结束标签之外

Question

在我创建的网页上，页面是由基于 PHP 的 CMS 动态生成的。 CMS 从数据库中获取页面的所有信息，然后将正确的 HTML 标记等回显到页面上。

我遇到的问题是，出于某种原因，我的浏览器将 div 扩展到它的结束标记之外。

IE:尽管我可以看到标签关闭，但浏览器似乎没有关闭，因此在该 div 中应用的任何样式都将应用到整个页面。

下面是 HTML 输出。 (这是页面的摘录，标题 div 是持久存在的)。

<div id="header">
 <table>
  <tr>
   <td style="width: 10%;">
    <img style="height: 120px; width: 101px;" src="img" alt="some alt">
   </td>
   <td>
    <h2>Heading</h2>
    <h3>Subhead</h3>
   </td>
  </tr>
 <table>
</div>
<div id="menubar">

我还包含了下一个 div 的开头。

如果我尝试在 div 中设置 h2 和 h3 的样式，所有的 h2 和页面上的 h3 标签受到影响。这是我的 CSS:

#header h2 {
    font-size: 24pt;
    font-weight: 900;
    color: #776F65;
    letter-spacing: 0;
    line-height: 0;
}

#header h3 {
    font-weight: 900;
    color: #776F65;
    letter-spacing: 0;
    padding-left: 35px;
}

最后，这是我用来生成 HTML 输出的 PHP 代码:

echo('<div id="header">'); // HEADER ELEMENT BEGINS HERE
    while($row = mysql_fetch_array($getHeaderElements)) {
        echo($row['content']);
    }
echo('</div>'); // End Header Element.

我使用的浏览器是 Google Chrome。

有人知道为什么会出现这种奇怪的行为吗？

问候，本。

Answer 1

<table> 的“结束”标签实际上是另一个表的开始标记。

此错误可能是您遇到问题的原因。

Validate您的标记，这是发现此类错误的一种廉价方法。