我的理解是，样式化的元素display:inline-block将在内部布局为一个块，但在它们所在的任何容器中被视为内联元素。如果它们位于一个li或一个div或一堆其他事物中，这似乎是正确的；但如果它们在里面，那就p不同了，原因我不清楚。考虑以下示例：
<!DOCTYPE html>
<p>Test1<table style="display:inline-block"><tr><td>x</td></tr></table>Test1</p>
<div>Test2<table style="display:inline-block"><tr><td>x</td></tr></table>Test2</div>
<p>Test3<span style="display:inline-block"><table><tr><td>x</td></tr></table></span>Test3</p>
<div>Test4<span style="display:inline-block"><table><tr><td>x</td></tr></table></span>Test4</div>
这里，前两行有一个表，display:inline-block其样式分别位于 ap和 a内部div。接下来的两个表在span具有内联块样式的 a 内，同样在 ap和 a内div。在测试 2 和测试 4 的div情况下，整个事情都显示在一行上（正如我对所有这些情况所期望的那样）。在 Test1 中，假定的内联块元素前面有一个换行符，而在 Test3 中，假定的内联块元素前面和后面都有一个换行符。
为什么？
这是流元素不属于p元素的经典案例，以两种有趣的方式表现出来。前言：p元素不能包含流元素，包括table. 请参阅规格。此类流元素被放置为该p元素的后续同级元素。所以：
<p><table></table></p>确实是<p></p><table></table><p></p>，并且<p><span><table></table></span></p>是真的<p><span></span></p><table></table><p></p>。（在这两种情况下，杂散</p>结束标记与新的开始标记相匹配的原因在为什么杂散 </p> 结束标记生成空段落中进行<p>了解释？ ）
您已经知道当包含元素是 a 时的预期行为div，因此我们将只关注带有该p元素的 Test1 和 Test3。
在 Test1 中，内联块元素前面有一个换行符，因为它位于p. （请注意，将table元素显示为内联块实际上只会导致该table元素生成一个匿名表格框以包含其后代 \xe2\x80\x94，这就是表格布局似乎被保留的原因。）以下“Test1”文本流放在它旁边，因为它位于同一个匿名段落中，并且与内联块位于同一行。
请注意，通过将杂散</p>结束标记与其自己的开始标记相匹配生成的段落实际上并不包含该文本。我在上面链接到的同一问题中描述了这种行为。
在 Test3 中，p元素能够包含内联块，因为它是一个span元素。但是，p元素在元素开始的地方结束table，因此内联块span完全包含在p元素内并且不包含table(事实上，它完全是空的)。因此，table出现在它自己的行上，其布局完好无损，并且以下“Test3”文本出现在 后面的另一行上table，因为表默认情况下是块级的，因此永远不会与任何其他元素（包括内联）。
另请注意，所有这些行为都定义良好（在各自的规范中），并且虽然元素p不能包含table元素，但 Test1 中导致但不包括</p>结束标记的所有内容在技术上都是有效的 HTML。它只是没有按照您的预期运行。
| 归档时间： |
|
| 查看次数： |
249 次 |
| 最近记录： |