div之间的标签的有效高度和宽度为0

Question

请参见https://jsfiddle.net/x7znc405/1/

上的示例

如果我有喜欢的html

<div id="wrapper">
<a>
  <div id="content">
  Hello World
  </div>
</a>
</div>

css

#content {
  background-color: blue;
  width: 100%;
  height: 100%
}

a {
  width: auto;
  height: auto;
}

#wrapper {
  display: inline-block;
  height: 39px;
  width: 200px;
}

a标签似乎没有任何有效的宽度或高度。我可以在浏览器中单击它，并且效果很好。

我关心的原因是，这意味着我必须使用force:true来使Cypress确信该标签是可见的并且可以单击，这显然使我陷入了标签真正不可见的问题。

我是否有办法让a“增长”以填充父级div？

Answer 1

a标签是行内元素，width和height在行内元素上无效。

因此，要添加宽度或高度，可以根据需要将a标签的显示属性设置为inline-block或block。