与其他浏览器相比，SVG 图像未正确显示在表格中答案

【问题标题】：SVG images not displaying in table properly compared to other browsers与其他浏览器相比，SVG 图像未正确显示在表格中
【发布时间】：2021-03-06 16:18:12
【问题描述】：

我创建了一个简单的表格来在我的网站上显示支付网关图标，在 chrome/firefox/android 上按预期工作

HTML/CSS：

<div id="draw-zone-wrapper" style="height: 25px;">
<table class="MyTable" style="border-collapse: collapse; width: 100%;" border="0">
<tbody>
<tr>
    <td style="width: 18%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.example.com/afterpay_logo.svg" /></td>
    <td style="width: 19%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.example.com/klarna_logo.svg" /></td>
    <td style="width: 14%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.example.com/zip_logo.svg" /></td>
    <td style="width: 21%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.example.com/laybuy_logo.svg" /></td>
    <td style="width: 28%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.example.com/latitude_logo.svg" /></td>
</tr>
</tbody>
</table>
</div>


.MyTable td
{
    padding: 10px;
}

不幸的是，IE 为所欲为，并显示如下：

关于如何改进我所做的工作以使所有浏览器都能正常运行的任何建议？

【问题讨论】：

标签： html css svg

【解决方案1】：

Internet Explorer 不会将任何 SVG 剪辑应用于 html 元素，因此您需要一个 SVG <image> 元素而不是 HTML <img> 元素并调整每个 SVG 的高度和宽度。试一次

【讨论】：

新手问题，但是每个 SVG 的宽度/高度都不同（我的 wordpress 主题是响应式的）不会指定宽度/高度会破坏响应能力？
是的，这就是 IE 的问题……您可以为所有 SVG 设置相同的宽度和高度。或者我的一个简单答案是“不要使用 IE”

【解决方案2】：

你能检查一下下面的代码吗？希望它对你有用。您只需将max-width:100%; 添加到img。

.MyTable img
{
    max-width: 100%;
}

【讨论】：

不幸的是没有区别

【解决方案3】：

由于图片的宽度不同，您可以尝试max-height 获取如下图片。还要确保 svg 图像定义了 viewBox。

.MyTable img {
    max-height: 30px;
    max-width: 100%;
    width: auto;
}

【讨论】：

感谢您的提示，我检查了每个图像都有一个视图框。通过指定 30 像素的最大高度，这会导致图像在 4k 显示器上变得非常小？
@Embercide，您可以使用 meida 查询定位大屏幕并增加这些屏幕的最大高度。