css - SVG Logo 的上方/下方有不需要的空白，仅在 Google 网站管理员工具页面缩略图中

Question

我已经提交了我的 website到谷歌的网站管理员工具，我遇到了一个奇怪的问题。内嵌 svg 的 Logo 会破坏缩略图上的布局。它在任何现代浏览器中都没有问题(在 FF、Webkit/Vivaldi/Chrome/Safari、Edge 中测试过)。同样的行为也出现在移动可用性预览中，其中 Logo 几乎位于屏幕底部边缘下方。 Bing 网站管理员工具也是如此。

至于这只是缩略图的问题，我不应该担心，但我想修复它。
Logo 位于 div 中，在 tablet+ 上宽度为 25%，对于任何更小的宽度为 100%，因此它会自动缩放。

有没有办法调试它？还是标志代码不对？

<h1>  
  <a title="page title" href="/">
    <svg version="1.1" x="0px" y="0px" width="100%" height="100%" viewBox="53 450 276 94" enable-background="new 53 450 276 94" xml:space="preserve">
      <title/>
      <desc/>
      <path/>
    </svg>
  </a>
</h1>

Answer 1

所以，我找到了这个错误报告:Bug 82489 - SVG Inline content incorrectly sizes

根据它，我将 style="max-height: 100%" 应用于我的 SVG，这修复了所有缩略图和一些 Android 浏览器。所以看起来这个错误仍然存​​在。

固定代码:

<h1>
  <a title="page title" href="/">
    <svg version="1.1" style="max-height:100%;" x="0px" y="0px" width="100%" height="100%" viewBox="53 450 276 94" enable-background="new 53 450 276 94" xml:space="preserve">
      <title/>
      <desc/>
      <path/>
    </svg>
  </a>
</h1>