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。有谁知道我的样式有什么问题吗？

注意：不知道为什么这被标记为重复，link 那里明确指定浏览器 window 大小不正确，这是因为元素大小不正确，并且，如前所述，我已经尝试使用 jquery width/height 方法，没有任何变化

虽然看起来它与 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;
}

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

IE11 has different clientWidth and clientHeight than all other browsers

html

javascript

css

internet-explorer

internet-explorer-11