Javascript IE11的clientWidth和clientHeight与所有其他浏览器不同

我已经创建了一个小组件，它显示了一个缩略图和一些按钮，这些按钮显示在悬停状态，没有什么特别的。它在除IE11之外的所有浏览器中都能正常工作，因为它讨厌我。我一直在到处寻找答案，但似乎找不出答案

此组件获取图像，将其缩小，使其在可用容器内（这取决于它是横向照片还是纵向照片）在宽度或高度上适合，然后在容器内水平和垂直居中放置图像

我曾尝试使用jquery来获取宽度，希望能够在浏览器之间对其进行规范化，我曾尝试过样式重构，甚至重构了我的组件的工作方式（尽管这一次无论如何都应该进行重构）

在图像加载时，loadImage事件触发，在方法的前几行中，我看到了这个问题

loadImage: function (el) {
                if (!el) {
                    return;
                }

                var width = el.naturalWidth;
                var height = el.naturalHeight;
                var parentWidth = el.parentElement.clientWidth;
                var parentHeight = el.parentElement.clientHeight;
                ...
}

el.parentElement.clientWidth是容器宽度的100%，而不是图像的大小

这是使用vue js，但这里是html

<div class='thumbnail-container'>
        <img class='item-thumbnail' ref='imgEl'
             :src='imageSource'
             :style='{ width: thumbnailWidth,
                                height: thumbnailHeight,
                                "margin-left": thumbnailMarginLeft,
                                "margin-top": thumbnailMarginTop }'
             @load='imgLoaded' />
    </div>

缩略图容器的父级样式：

.modules-widget-thumbnail-body .modules-widget-thumbnail-cont {
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

预期的结果是img标记指示缩略图容器的大小，而不是相反。这种设置适用于chrome、firefox和edge，但不适用于IE11。有人知道我的造型有什么问题吗

注意：不确定为什么会将其标记为重复，其中的链接明确指定浏览器窗口大小不正确，这是因为元素大小不正确，并且，如上所述，我已经尝试使用jquery宽度/高度方法，没有任何更改

看起来它和flex有关，删除了.module.widget的显示：flex使它们显示相同的内容，但是有没有办法模仿chrome在IE中的表现呢

函数imgLoaded（e）{
log（“宽度：+e.target.parentElement.clientWidth+”高度：+e.target.parentElement.clientHeight）；
}

.module.widget.module body{
溢出：隐藏；
}
.模块小部件缩略图正文{
左边距：自动；
右边距：自动；
}
.modules小部件缩略图正文.modules小部件缩略图cont{
身高：100%；
位置：相对位置；
}
.缩略图容器[data-v-537a556c]{
身高：100%；
宽度：100%；
溢出：隐藏；
位置：相对位置；
光标：指针；
}
.modules小部件缩略图正文.modules小部件缩略图cont img{
自对准：居中；
最大宽度：100%；
最大高度：100%；
光标：指针；
}
.module.widget{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
背景色：#FFF；
边框：1px实心#D9DFE1；
边界半径：3px；
溢出：隐藏；
}

---

我在这个评论部分的帮助下找到了答案

显然，IE11使用默认的“对齐项目”设置，即“拉伸”。显式设置以下样式可以修复此问题

.modules-widget-thumbnail {
    align-items: center;
}

---

可能重复您是否尝试使用开发人员工具检查应用的样式？通常，Flex在Internet Explorer中使用时会引起一些问题。您可以检查并让我们知道结果。这有助于缩小问题的范围。那里的链接并不能解决问题，我已经使用了jquery的width（）和height（），IE中的数字不同。开发工具中的样式似乎是相同的，虽然我已经从等式中完全删除了flex，但有相同的问题-缩略图容器正在扩展其内容，而不是与其内容大小相同-调试一个我们无法重现的问题非常困难。您能否将呈现的HTML、JS和CSS复制到一个文件中，以便我们可以看到问题“正在发生”？谢谢。你为我节省了很多时间！：）

.modules-widget-thumbnail {
    align-items: center;
}