浏览器可以更改HTML吗？

Question

我的标记看起来像这样

<div class="thumbnail">
    <a class="link-to-product" href="#">
        <div class="stickers">
            <div class="sticker discounts">Акции</div>
        </div>
        <div class="thumbnail-top">
            <div class="img-wrap"><img src="img/box2.png" alt=""></div>
            <div class="category">Жидкости</div>
            <div class="title">Масло черного тмина</div>
        </div>
        <div class="thumbnail-down">
            <div class="divider"></div>
            <div class="price-container">
                <div class="current-price">
                    <span>250 </span>
                    <span class="currency">грн.</span>
                </div>
                <div class="old-price">
                    <span>300</span>
                </div>
            </div>
            <a class="buy-button" href="#">Купить</a>
        </div>
    </a>
</div>

这是我在浏览器devtools中看到的：

.thumbnail-down从.link-to-product中退出。

我尝试使用其他浏览器（chrome，firefox），清除缓存，关闭CSS和JS。而且.thumbnail-down仍从.link-to-product中掉出来。

我在pug中写了标记，并用gulp编译了html。当我查看html文件夹中的已编译dist时，看起来不错。我实际上是从该文件中复制了代码示例。天啊。什么会导致这种奇怪的行为？

我检查了此元素之前和之后的所有链接。它们都已正确关闭

不仅脱落。浏览器复制.link-to-product。此页面上没有CSS和JS，只有纯HTML。我将它复制到另一个文件夹，没有gulp，没有其他插件

Answer 1

尝试在内部不嵌套。

我的意思是

<a class="buy-button" href="#">Купить</a> 

位于

<a class="link-to-product" href="#">

我的猜测是导致问题的原因。