p元素的奇怪行为

Question

这个Fiddle

出了什么问题

问题在于以下几点：

<p>
    <span class="is_not_active">
        <div class="arrow"></div>
        <div class="rectangle"></div>
    </span>                 
</p>  

如果带走p元素，我可以看到红色箭头，否则箭头是不可见的。你能跟我说点什么吗？尝试自己的小提琴。 感谢

Answer 1

您不能将<div>放在<p>内，并从各种浏览器中获得一致的结果。为浏览器提供有效的HTML，它们会表现一致。

您可以将<div>放在<div>内，但如果您将<p>替换为<div class="name">并对其进行适当设置，则可以得到您想要的内容。

<div>
    <span class="is_not_active">
        <div class="arrow"></div>
        <div class="rectangle"></div>
    </span>                 
</div>

这样可行。我修改了你的小提琴并进行了测试。

Answer 2

根据{{​​3}}，

<P>标记不允许包含任何内联元素。

<DIV>是块元素。