a标签里嵌套a标签

由于需求需要在a标签里面再嵌套一层a标签:

<a href="javascript:;">
    father tag A
    <a href="javascript:;">Child tag Aa>
a>

结果样式乱了套,一看,耶?明明是父子关系,浏览器解析的结果却是:
在这里插入图片描述
一番查阅:a标签嵌套a标签,浏览器会自动添加结束符号。
而HTML的嵌套规范里就有一条:a标签不能嵌套a,查看更多嵌套规范
解决办法:

  • 换标签
    hhhhh~,简单粗暴。
  • 我就想用a标签,不能接受换标签
    (1)使用object标签进行嵌套
<a href="javascript:;">
   father tag A
  <object><a href="javascript:;">Child tag Aa>object>
a>

定义一个嵌入的对象,浏览器解析结果:
a标签里嵌套a标签_第1张图片
浏览器支持:
a标签里嵌套a标签_第2张图片
IE8及以下不支持object标签。
(2)蠢办法
父元素设置display: block;display: inline-block;并设置宽高和position: absolute,调整内外a标签的样式,调整层级关系。如此只能达到满足效果,浏览器解析依然不是嵌套关系
又要坚持a标签又要兼容IE8还要是嵌套关系,无法了(▼ヘ▼#)~~~

你可能感兴趣的:(CSS)