为什么边境道具不起作用？

Question

JsFiddle DEMO

这是我的html：

<span> Testing
    <table>
        <tbody>
            <tr>
                <td>One</td>
                <td>Two</td>
                <td>Three</td>
            </tr>
        </tbody>
    </table>
</span>

我的css：

span {
    border: 1px solid black;
}

整个范围不应该得到正常的边界吗？我在Firefox和Chrome中得到了混乱的结果（还没有在其他人测试）

我错过了什么或做错了什么？

Answer 1

<table>不属于<span> s，因为<table>是块级元素而<span>是内联元素，所以没有必要测试代码作为结果将是不可预测的。

使用<div>代替<span>。

Answer 2

span {
    border: 1px solid black;
    display: block;
}

Answer 3

<span>标记用于对文档中的内联元素进行分组。最好的解决方案是修改<span>并改为使用<div>。一个简单的修改，以达到您想要的结果。