amp-html - 包裹在 anchor 标记中时，Google Amp 响应图像不显示

Question

我正在创建一个 google amp 页面，需要包含一个响应式图像。我希望图片是可点击的，这样当它被点击时，它会使用 anchor 标记导航到另一个 url。一切正常，直到我用 anchor 标记包装 amp-image，此时图像将不再显示在页面上。如果我使用一些其他布局选项，例如 fixed 或 flex-item，图像将显示为它应该与 anchor 标记一起使用。

放大器验证测试通过。

这是我提交的 html:

 <a href="www.example.com">
    <amp-img layout="responsive" src="/src/photo.JPG" width="2056" height="396"/></amp-img>
 </a>

这是在页面上呈现的结果 html。

  <a href="www.example.com">
    <amp-img layout="responsive" class="-amp-element -amp-layout-responsive -amp-layout-size-defined" src="/src/photo.JPG" width="2056" height="396">
      <i-amp-sizer style="display:block; padding-top: 19.26%"></i-amp-sizer>
    </amp-img>
  </a>

通常在 i-amp-sizer 标签之后添加另一个 img 标签，即显示在页面上的标签。但是，正如您所见，当我添加 anchor 标记时，img 标记消失了。我似乎无法弄清楚为什么会发生这种情况或如何解决它。

Answer 1

在我的 amp-custom CSS 中，我为 anchor 标记设置了 display: inline-block。一旦我删除了 inline-block 样式标签，它就起作用了。