Может ли браузер изменить 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 и скомпилировал html с gulp. Когда я смотрю на скомпилированную папку html в dist, все выглядит хорошо. Я фактически скопировал образец кода из этого файла. Святая корова. Что может вызвать такое странное поведение?

Я проверил все ссылки до и после этого элемента. они все правильно закрыты

Не только выпадает. Браузер копирует .link-to-product. На этой странице нет css и js, только чистый HTML. И я скопировал его в другую папку без глотка и без других плагинов

Answer 1

Попробуйте без вложения внутрь a.

Я имею в виду

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

внутри

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

Я думаю, именно это и является причиной проблемы.