在块'a'标记之外的元素渲染

Question

我有一系列<a>代码设置为display:block。

其中包含一系列<divs>，例如：

<a href="#" class="sliderframe">
             <div class="container-caption">
                <div class="slider-caption">
                  <p>CAPTION</p>
                  <a href="#">SHOP ONLINE</a>    
                </div>
            </div>
 </a>

但是，当浏览器呈现这些时，内部div显示在A标记之外，例如：

<a href="#" class="sliderframe"></a>
    <div class="container-caption">
      <div class="slider-caption">
         <p>CAPTION</p>
         <a href="#">SHOP ONLINE</a>    
      </div>
    </div>

有人知道为什么会这样吗？

CSS：

.sliderframe
{
    display: block;
    width: 100%;
    height: 570px;
}

Answer 1

将锚标记嵌套在另一个锚标记中是非法的。浏览器会通过将嵌套元素移动到父锚标记的外部来自动纠正此问题。