javascript - 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>

一切都在正确计算，问题是 thumbnail-container 是它在 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 设置，即拉伸(stretch)。显式设置以下样式可以修复它

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