在Safari中垂直拉伸的图像，其父容器为display flex

Question

我有一个简单的ul / li，里面有图像/文字。在Safari中，图像被垂直拉伸：

HTML代码：

<ul class="dropdown-menu">
        <li>
        <a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint</a></li>
                    <li>
        <a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint</a></li>
                    <li>
        <a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint</a></li>
        </ul>

CSS：

.dropdown-menu > li > a {
    border-top: 0 solid #efefef;
    color: inherit;
    display: flex;
    padding: 10px 30px 12px;
    clear: both;
    font-weight: normal;
    line-height: 25px;
    white-space: nowrap;
}

 ul.dropdown-menu li a img {
    width: 25px;
    margin-right: 15px;
}

Safari：

Chrome：

实时小提琴网址进行测试：https://jsfiddle.net/raghav_khunger/ko0wybhx/8/

我可以在图像上添加高度为25px的硬编码以解决此问题：

ul.dropdown-menu li a img

另一个解决方案可能是使用align-items：center; .dropdown-menu> li> a（https://jsfiddle.net/raghav_khunger/ko0wybhx/10/）

的规则

还有其他解决方法吗？

上述解决方案对于使图像不拉伸有效吗？

您能分享为什么在Safari中图像变长而在Chrome中效果很好的原因吗？

Answer 1

您可以尝试使用此代码，希望它对您有用。