a标签嵌套怎么解决

我们知道，在实际的网页布局之中，有时候是需要一整块点击区域中间还要有部分的按钮点击，那么就是A标签嵌套A标签了

outerA innerA

但是我们会发现，这种嵌套，浏览器会直接错误解析，解析结果如下：

outerA innerA

那么针对这种情况如何解决呢？

方案一：使用object标签进行嵌套

例如我么如下写，就不会错误解析了！

outerA innerA 登录后复制 这种写法的典型应用最多的是列表整个需要点击，列表里面有电话号码需要单独点击拨打！

列表内容 拨打电话 登录后复制 方案二：使用定位方式

这种方式是迫不得已的方式，思路就是我们不用嵌套。直接代码如下书写：

outerA innerA 登录后复制 外层的haorooms通过设置 display :inline-block，以及 绝对定位 ，将其放在里层a标签的位置。然后通过调整里层a标签及外层a的 z-index 大小，使得鼠标能正确选中a标签；

这种方法的核心思想就是通过定位来模拟实现我们想要达到的效果！

方案三：使用 HTML的 标签来实现

记得在学校学校网页制作的时候，用的是dreamweaver，dreamweaver中可以使用 图片 热区来实现图片的点击效果。没错，我们可以使用热区来实现a标签的嵌套效果啊！

area标签很久没有使用了，普及一下基础知识：

area可以指定shape及coords。

如果 shape 属性 设置为 "rect"，则该值规定矩形左上角和右下角的坐标。（x1,y1,x2,y2）

如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。（x,y,radius）

如果 shape 属性设置为 "poly"，则该值规定多边形各顶点的值。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。（x1,y1,x2,y2,..,xn,yn）

area和map要配合使用，可以在图片上面指定部分热区，也可以在列表中指定热区。

假如我们运用area和map在列表中a标签内部指定热区，就可以实现类似我们上面a标签嵌套的效果了！

还是上面的例子，我们可以如下书写：

outerA 登录后复制 方案四：使用span等标签加js事件来代替a标签

当然我们也可以用span，标签等替代a标签，只不过要多写一些js跳转代码了，通过js来实现a标签所能实现的效果！

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

php8，我来也