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

Question

我创建了一个小组件，它显示一个带有一些悬停时显示的按钮的缩略图，没什么特别的。它在除 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>

一切都正确计算，问题是缩略图容器是 IE11 中列的全宽，但只有 chrome 中的 img 标签的大小，所以高度和宽度被丢弃了。

这些是缩略图容器上的样式

.thumbnail-container {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }

缩略图容器的父级样式：

.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 中所做的事情？

function imgLoaded(e) {
  console.log("Width: " + e.target.parentElement.clientWidth + " Height: " + e.target.parentElement.clientHeight);
}

.module.widget .module-body {
    overflow: hidden;
}
.modules-widget-thumbnail-body {
    margin-left: auto;
    margin-right: auto;
}

.modules-widget-thumbnail-body .modules-widget-thumbnail-cont {
    height: 100%;
    position: relative;
}

.thumbnail-container[data-v-537a556c] {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.modules-widget-thumbnail-body .modules-widget-thumbnail-cont img {
    align-self: center;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}

.module.widget {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #FFF;
    border: 1px solid #D9DFE1;
    border-radius: 3px;
    overflow: hidden;
}

<div class="modules-widget-thumbnail module widget"> 
  <div class="modules-widget-thumbnail-body module-body" style="height: 400px;">
    <div id="modules-widget-thumbnail-thumbnail-1570032551907" class="modules-widget-thumbnail-cont thumbnail-view">
      <div data-v-537a556c="" class="thumbnail-container" style="position: relative;">
        <img data-v-537a556c="" src="https://i.imgur.com/UBPVhan.jpg" onload="imgLoaded(event)" class="item-thumbnail">
      </div>
    </div>
  </div>
</div>

Answer 1

我在此评论部分https://github.com/philipwalton/flexbugs/issues/239的帮助下想通了

显然 IE11 使用默认的 align-items 设置，即拉伸。显式设置以下样式修复它

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