在摘要中添加文章页链接时,常见的错误是将<a>标签嵌套在另一个<a>标签内。浏览器会自动添加结束符,导致样式错乱和链接失效。
示例代码
<a href="https://www.556z.com/">
<div class="list">
<img src="img/1.jpg" alt="img">
<a href="/">查看详情</a>
</div>
</a>
浏览器解析结果
<a href="https://www.556z.com/"></a>
<div class="list">
<a href="https://www.556z.com/">
<img src="img/1.jpg" alt="img">
</a>
<a href="/">查看详情</a>
</div>
解决方案
1、更换标签:如果不必要,建议使用其他标签替代<a>。
2、使用<object>标签:将子元素<a>放入<object>标签中,以避免嵌套问题。
<a href="https://www.556z.com/">
<div class="list">
<img src="img/1" alt="img">
<object><a href="/">查看详情</a></object>
</div>
</a>
PS:设置外层<a>为行内块级元素(display: inline-block;),并调整定位与z-index,使鼠标能够正确选中链接。
虽然有多种解决方案,但最简便有效的是避免嵌套<a>标签,节省时间与精力。
广告插入