Bootstrap 4.1模态框在IE11中聚焦输入框时尺寸偏移问题求助

这个问题是Bootstrap 4.x针对IE11的典型兼容性bug，核心原因是IE11对滚动条宽度的计算逻辑和现代浏览器不一致，当输入框聚焦触发页面滚动条变化时，模态框的动态padding调整会出现异常，进而导致尺寸偏移。下面是几个经过验证的解决方法：

方法1：针对性CSS强制稳定尺寸 #

通过IE11专属的媒体查询，强制移除模态框和body上的动态padding-right，避免滚动条变化带来的尺寸波动：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE11专属样式 */
  .modal-open .modal {
    padding-right: 0 !important;
  }
  .modal-open {
    padding-right: 0 !important;
  }
}

这段代码只会在IE11中生效，不会影响其他浏览器的正常表现。

方法2：重写Bootstrap的滚动条调整逻辑 #

Bootstrap默认会在模态框打开时自动调整body的padding来补偿滚动条宽度，我们可以重写这个逻辑，只在必要时才进行调整：

$(document).ready(function() {
  // 覆盖Bootstrap模态框的滚动条调整方法
  $.fn.modal.Constructor.prototype._adjustDialog = function() {
    var modalContentOverflows = this.$element[0].scrollHeight > document.documentElement.clientHeight;
    var scrollbarWidth = this._getScrollbarWidth();
    // 仅当模态框内容自身超出视口时，才添加padding补偿
    if (modalContentOverflows) {
      this.$modal.css('padding-right', scrollbarWidth);
    }
  };
});

这个方法从根源上修正了Bootstrap在IE11下的判断逻辑，避免不必要的尺寸调整。

方法3：针对无长内容的模态框隐藏滚动条 #

如果你的模态框内容不会超出视口高度，可以直接强制隐藏IE11下的滚动条，从根源避免问题：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .modal-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .modal-content::-webkit-scrollbar {
    display: none;
  }
}

注意：这个方法只适合内容高度固定且不会超出视口的模态框，否则会导致内容无法滚动。

你提到的打开模态框时聚焦元素的临时方案，本质是提前触发了滚动条调整逻辑，让模态框尺寸提前稳定，但确实不适合所有场景。上面的方法更通用，能覆盖大多数使用场景。

内容的提问来源于stack exchange，提问作者Nformer