在MS Edge中呈现页面时，图像尺寸不正确

Question

我将Instagram和Facebook链接添加到this site的导航菜单中。在Chrome上，它们以适当的大小显示，但是原始图像大小在Edge中使用，看起来很疯狂

社交链接的标记是

<nav id="nav">
    <ul>
        <!-- other menu items omitted -->
        <li class="social-link">
            <a target="_blank" href="https://www.facebook.com/chaletsdesbouleaux">
                <img src="images/social/facebook-white.svg" alt="Facebook"/>
                <span class="menu-label">Facebook</span>
            </a>
        </li>
        <li class="social-link">
            <a target="_blank" href="https://www.instagram.com/chaletsdesbouleaux">
                <img src="images/social/instagram-64.png" alt="Instagram"/>
                <span class="menu-label">Instagram</span>
            </a>
        </li>
    </ul>
</nav>

限制徽标大小的CSS是

.social-link {
    width: 50px;
}

.social-link .menu-label {
    display: none;
}

.social-link img {
    position: relative;
    top: 5px;
}

我需要进行哪些更改，以便在Edge上以正确的尺寸显示图像？

我很难通过反复试验解决此问题，因为我可以访问的唯一计算机是Mac，无法在其上安装Edge。

Answer 1

.social-link img {
  position: relative;
  top: 5px;
  width: 1.3em; // <!-- this might help
}