代码之家 › 专栏 › 技术社区 › lucidbrot

浏览器生成html源中没有源的空段落

html

lucidbrot · 技术社区 · 6 年前

我的网站包含一个表

<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在开发工具中显示源代码时,显然有一个空的  插入到正文之前。

这一段似乎无缘无故地出现了。为什么?

1 回复 | 直到 6 年前

lucidbrot 6 年前

魔鬼在于细节:

    <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> 以 </td> </td> .
很奇怪,两个浏览器对此的反应是一样的。

--> 也不需要启动对应的节目。