关于a标签嵌套a标签问题以及解决方案

下面是html里面的代码

<a href="###">
	<div class="index-lb1">
		<img src="img/index-lb1.jpg" alt="">
			<a class="banner_view" href="###">VIEW</a>
	</div>
</a>

在浏览器中会解析结果如下：

<a href="###"></a>
<div class="index-lb1">
	<a href="###">
		<img src="img/index-lb1.jpg" alt="">
	</a>
	<a class="banner_view" href="###">VIEW</a>
</div>

a标签嵌套a标签，浏览器会自动添加结束符号。
而HTML的嵌套规范里就有一条：a标签不能嵌套a。

解决方案

1、若非必须，换个其他的标签（简单粗暴hhh~）

2、不能接受换标签，可以使用object标签进行嵌套

把作为子元素的a标签放在object标签里面，这样浏览器解析的与HTML里面编辑的是一样的。

<a href="###">
	<div class="index-lb1">
		<img src="img/index-lb1.jpg" alt="">
			<object><a class="banner_view" href="###">VIEW</a></object>
	</div>
</a>

浏览器解析结果如下：

<a href="###">
	<div class="index-lb1">
		<img src="img/index-lb1.jpg" alt="">
			<object><a class="banner_view" href="###">VIEW</a></object>
	</div>
</a>

3.将外层a标签改为行内块级元素

即display:inline-block;设置height/width并设置为绝对定位将其放在里层a标签的位置，通过调整里层a标签及外层a的z-index大小，使得鼠标能正确选中a标签；
其实这样浏览器解析的与HTML编辑还是不一样，只是达到了想要的效果。
所以说这种办法是最麻烦的，最不建议采用的。

如有错误请各位大神评论指教……