Google AMP响应式图像在包裹在锚标签中时不会显示

Question

我正在创建一个Google AMP页面，需要包含响应式映像。我希望该图像可单击，以便使用锚定标签时，单击它会导航到另一个URL。一切正常工作，直到我用锚标签包裹放大器图像，此时将不再在页面上显示图像。如果我使用其他一些布局选项，例如固定或弯曲项目，则图像即使在锚标签上也应该出现。

AMP验证测试通过。

这是我提交的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标签，这是页面上显示的标签。但是，如您所见，当我添加IMG标签消失的锚标记时。我似乎无法弄清楚为什么会发生这种情况或如何解决。

Answer 1

在我的AMP-CUSTOM CSS中，我对锚固标签设置了display: inline-block。一旦删除了工作的内联块样式标签。

Answer 2

在我的情况下，head标签下缺少以下内容。

<script async src="https://cdn.ampproject.org/v0.js"></script>

对我有用。

Answer 3

通过在锚标签上添加display : grid; CSS检查。就我而言，我得到了解决方案。