时间戳

首页 > 解决方案 > 浏览器在 html 源代码中生成没有源代码的空段落

html - 浏览器在 html 源代码中生成没有源代码的空段落

问题描述

我的网站包含一个表格

<div class="row">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading">Alpha Beta Gamma Delta</div>
            <table class="panel-body table table-bordered">
                <tbody>
                    <tr>
                        <td>Some Text</td>
                        <td><p><a href="https://example.com">A Link</a></p>
                        <p><a href="https://example.com">Another Link</a></td></p>
                    </tr>                           
                </tbody>
            </table>
        </div>
    </div>
</div>

由于某种原因，表格内容上方有一个空行： 在此处输入图像描述 源代码不包含这个，但是在开发者工具中以firefox和chrome显示的方式查看源代码，<p></p>表体前明显插入了一个空行。

这一段看似无缘无故，凭空出现。为什么？

标签： html

解决方案

魔鬼在于细节： 比较

    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">Alpha Beta Gamma Delta</div>
                <table class="panel-body table table-bordered">
                    <tbody>
                        <tr>
                            <td>Some Text</td>
                            <td><p><a href="https://example.com">A Link</a></p>
                            <p><a href="https://example.com">Another Link</a></td></p>
                        </tr>                           
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">Alpha Beta Gamma Delta</div>
                <table class="panel-body table table-bordered">
                    <tbody>
                        <tr>
                            <td>Some Text</td>
                            <td><p><a href="https://example.com">A Link</a></p>
                            <p><a href="https://example.com">Another Link</a></p></td>
                        </tr>                           
                    </tbody>
                </table>
            </div>
        </div>
    </div>

不同之处在于第一个版本实际上不是有效的 html：它以<td><p>而</td></p>不是</p></td>.
奇怪的是，两个浏览器对此的反应都是一样的。

似乎任何错误地添加到表中的东西都被添加到它之前，作为-->没有开始对应物的流浪者也显示。

推荐阅读