在 MS Edge 中呈现页面时图像大小不正确

Question

我在 this site 的导航菜单中添加了 Instagram 和 Facebook 链接。 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
}

在 MS Edge 中呈现页面时图像大小不正确

Image sizes are incorrect when page is rendered in MS Edge

html

css

microsoft-edge