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>
.
.

但是当我使用萤火虫来检查第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
{   ....
}

是的，当被要求提供网址时： 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>

源代码和检查元素输出的差异（以及网页的行为）

1 个答案: