随着移动设备逐渐普及，响应式设计变得越来越流行。然而，一些老旧的浏览器，特别是 IE，可能会导致页面崩溃，这是令人头痛的问题。本文将讨论在响应式设计中如何解决 IE 中导致页面崩溃的问题。
问题来源
在 IE 浏览器中，如果一个元素设置了 min-height 或 max-height 属性，但是该元素的上级元素设置了 height: 100% 或者 display: flex，那么在调整浏览器大小以引发页面宽度变化时，就会导致页面崩溃。这是由于 IE 计算高度的方式与其他浏览器不同，导致高度计算错误的原因所致。
解决方案
一种简单有效的解决方案是使用 JavaScript，根据页面大小调整元素的高度。使用此方法，我们可以避免 IE 中的计算高度错误。
以下是一个示例代码：
-- -------------------- ---- ------- -------- -------------- - --- ------ - ---------------------------------- --- ----- - --------------------------------- ------------------ - ------------------- - ----- - ------------- - ---------- - --------------- --------------- - ------------- --
在这个代码中，我们使用 DOM API 获取了父元素和子元素，然后根据父元素的高度设置了子元素的高度。最后，我们添加了一个 window.onresize 事件处理程序，这样每当浏览器窗口的大小更改时，我们就可以根据新的窗口大小重新计算高度。
结论
在响应式设计中，使用 min-height 和 max-height 属性确实可以帮助我们更好地适应不同设备的屏幕大小。但是，在老旧的浏览器中，这些属性可能会导致页面崩溃，这是一个需要注意的问题。通过使用 JavaScript 动态计算元素高度，我们可以避免这个问题的发生。希望本文能够对你理解并解决 IE 中的页面崩溃问题提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6711a542ad1e889fe2000894