前端开发中，响应式设计已经成为了非常重要的一环。而IE浏览器的存在也是我们无法忽视的一个问题，因为在IE浏览器中，响应式网站显示出现的问题比其他浏览器还要明显。这篇文章将会讲解这些问题以及如何应对这些问题，帮助前端工程师更好地开发和设计响应式网站。
IE浏览器存在的问题
在IE浏览器中，响应式网站显示出现的问题通常有如下几个：
样式兼容问题：IE浏览器对CSS3属性的支持不足，而CSS3属性通常是响应式设计常用的属性。比如，border-radius、box-shadow、transform等。如果使用了这些属性，可能会导致在IE中网站无法正确显示。
响应式布局的问题：IE浏览器对流式布局、百分比布局等有一定的支持，但是对于flex布局却有很大的问题。如果使用了flex布局，在IE中会出现排版错乱、元素位置错误等问题。
JavaScript兼容问题：IE浏览器对新的ECMAScript标准支持不足，通常使用的ES6/ES7语法在IE中并不支持，这可能会导致在IE中脚本无法正确执行。
图片显示问题：在IE浏览器中，如果采用图片代替样式，使用flex属性时容易导致图片变形或错位。
解决方案
针对这些问题，我们可以采用如下解决方案：
1. 样式兼容问题
对于CSS3属性可尝试使用浏览器前缀，或者使用JavaScript或者JQuery获取样式属性并动态生成样式以避免兼容问题。
-- -------------------- ---- -------
-------- ------------------- ------ -
--- ---- -------- -- ------ -
-- -------------------------------- -
------------------ - ----------------
--------------- - --------- - ----------------
-- -------
-
-
-
------------------------------------------------
---------------- -------
------------- ---- --- ---- -----
---2. 响应式布局的问题
针对flex布局的问题，可以尝试使用其他布局方式，比如百分比布局。如果一定要使用flex布局，推荐使用flexbox的Polyfill解决方案，如flexibility.js。
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <div class="box">Box 4</div> </div>
-- -------------------- ---- ------- ----------- -------- ------------ -------- ----- -------------- ----- ---------- ----- - ----- ------ ----- --------- -- ----- -- -
<script src="https://cdn.jsdelivr.net/flexibility/2.0.0/flexibility.js"></script>
3. JavaScript兼容问题
针对JavaScript兼容问题，尽可能使用新版ECMAScript标准，并使用Babel进行语法转换。需要保证你的babel编译后能够支持IE浏览器的版本和标准。
4. 图片显示问题
针对使用图片代替样式的问题，可以尝试使用 蚂蚁金服的 gum 工具来解决不同浏览器下图片的比例问题。
总结
IE浏览器的出现，让响应式设计在实际运用时变得有些棘手。但是，只要我们针对IE下存在的问题，进行详细的分析并运用相应的解决方案，就可以轻松应对响应式设计在IE浏览器中出现的问题。希望这篇文章能够对前端工程师有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65965b44eb4cecbf2da31781