前端网页标签嵌套问题

a标签的嵌套。

但是总所周知a标签是内联元素(inline element),如果嵌套a标签的话浏览器则会解析成:

复制代码
1 <!-- a标签进行嵌套的时候 -->
2 <a href="#outer">outerA
3     <a href="#inner">innerA</a>
4 </a>
5 
6 <!-- 而浏览器则会解析成 -- >
7 <a href="#outer">outerA</a>
8 <a href="#inner">innerA</a>
复制代码

这样的话就不符合需求了。

这里介绍的解决方案有两种:

1.使用object标签进行嵌套

<a href="#outer">
    outerA
    <object><a href="#inner">innerA</a></object>
</a>

这样页面就会解析成:

这样在内层a标签加一层object标签嵌套,可以解决了a标签嵌套的问题了。这个办法在火狐和谷歌、IE9及以上是没问题的。但是IE8及以下就会有问题,因为IE8不支持object标签,它会将object解析成一个对象a标签的内容显示不出来。所以就有了下面的第二种方案。

2.将外层a标签改为行内块级元素即display:inline-block;设置height/width并设置为绝对定位将其放在里层a标签的位置,通过调整里层a标签及外层a的z-index大小,使得鼠标能正确选中a标签;

由于产品要求兼容到IE8,所以公司目前使用的是这种方案:

这样通过改变外层a标签的display并调整position及z-index也可以达到a标签嵌套的效果,注意这里说的是效果而不是具体的解析就是嵌套的。

更多情况下推荐第一种方式,这样浏览器解析的会更好。


除了a标签之外,还有一些标签不能嵌套,总结一下:

1.a标签最好不要嵌套块级元素,可以嵌套内联元素,但是不能嵌套a标签和input之类的标签。能嵌套的标签像,等等。
2.ul和ol的子元素不能是别的元素只能是li,不能是别的比如div等,但是li中可以是div,要不然在ie6和7下回把非li解析到li的内部。这个切记没有办法修复!

3.p标签不能嵌套块级元素甚至不能嵌套p元素,只能嵌套内联元素,不然对p嵌套的块级元素设置css不起作用。

4.button里面不要嵌套a标签,不然在js里面会有两个事件,还有就是button里面放img要记得给图片添加alt属性。

5.dt标签里面不能嵌套块级元素,只能嵌套内联元素。但是dd可以嵌套块级元素。

猜你喜欢

转载自blog.csdn.net/u011724770/article/details/80657333
今日推荐