我的标记看起来像这样
<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>
这是我在浏览器开发工具中看到的:
.thumbnail-down
掉出来.link-to-product
。
我尝试了不同的浏览器(chrome、firefox),清除了缓存,关闭了 css 和 js。而且还是.thumbnail-down
掉出来了.link-to-product
。
我写了标记并用pug
.html 编译了 html gulp
。当我查看html
在dist
文件夹中编译时,它看起来不错。我实际上从这个文件中复制了代码示例。天啊。什么会导致这种奇怪的行为?
我检查了这个元素之前和之后的所有链接。它们都已正确关闭
不仅会掉出来。浏览器复制.link-to-product
。这个页面没有css和js,只有纯html。我将它复制到不同的文件夹中,没有 gulp 也没有其他插件
尝试不在 a 内嵌套 a。
我的意思是
<a class="buy-button" href="#">Купить</a>
在里面
<a class="link-to-product" href="#">
我的猜测是这就是导致问题的原因。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句