php - 源代码和检查元素输出的差异(以及网页的行为)

Question

我想不出这个问题的标题应该是什么，抱歉!这是我正在编写的 php 页面的代码:

    echo '<table>';

    $conn = dbconnect();
    $query = 'SELECT * FROM validUploads';
    $result = @$conn->query($query);
    if($result)
    {   
        while(true)
        {   $data = $result->fetch_assoc();
            if(!$data)
            {   break;
            }
            else
            {   $id = $data['id'];
                $college = $data['college'];

                echo<<<__REG_DATA
                    <tr>
                        <a name="ds{$id}"></a>
                        <div id="ds{$id}">
                            <td>{$id}</td>
                            <td>{$college}</td>
                            <td><a href="download.php?dId={$id}"></a></td>
                        </div>
                    </tr>
__REG_DATA;
            }
        }
    }

echo '</table>';

当在浏览器中运行时，源代码会像预期的那样很好地显示打印的细节:

<tr>
    <a name="ds1"></a>
    <div id="ds1">
    <td>1</td>
    <td>College1</td>
    <td><a href="download.php?dId=1"></a></td>
</tr>
.
.

但是当我使用 firebug 检查第 7 行的元素时，它显示如下:

<div id="ds1"> <a name="ds1"></a> </div>
<div id="ds2"> <a name="ds2"></a> </div>
<table>
<tr>
    <td>1</td>
    <td>College1</td>
    <td><a href="download.php?dId=1"></a></td>
</tr>
<tr>
    <td>2</td>
    <td>College2</td>
    <td><a href="download.php?dId=2"></a></td>
</tr>

这是一个问题，因为我想使用 css3 突出显示表格中的锚定行

:target
{   ....
}

是的，当请求一个 url 时: http://mysite.com/index.php#ds2它滚动到表格的顶部而不是第 2 行，这与 inspect-element 输出一致!

有人可以解释一下这种行为以及如何纠正吗？

Answer 1

生成的 HTML 无效(只有 <td> 和 <th> 元素可能是 <tr> 元素的子元素)。浏览器尝试从错误中恢复。结果就是您在 DOM 检查器中看到的。

始终使用 a validator 测试您的标记.

为了得到你想要的效果，你可能应该这样做:

<tr id="ds1">
  <td>1</td>
  <td>College1</td>
  <td><a href="download.php?dId=1"></a></td>
</tr>