兼容低版本IE浏览器的一些技巧分享

最新推荐文章于 2024-06-29 12:45:00 发布

gg7894125

最新推荐文章于 2024-06-29 12:45:00 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/gg7894125/article/details/108267775

版权

本文分享了在兼容IE低版本浏览器时遇到的问题和解决方案，包括：转换webp格式为jpg/png，解决IE对Flex布局的不兼容，处理swiper插件在IE9及以下的兼容性，避免使用ES6语法，解决IE9以下不支持placeholder属性，调整JQuery版本到1.x以适应IE8，以及如何处理IE8及以下对CSS3的不兼容。

摘要由CSDN通过智能技术生成

前言：

近期工作中，突然被要求改别人的代码，其中有一项就是兼容IE低版本浏览器，所以优雅降级吧。

我相信兼容低版本IE是许多前端开发的噩梦，尤其是改别人写的代码，更是痛不欲生。

本文将介绍一些本人兼容时的一些心得体会，以及踩到的一些坑。
汇总：
1.IE浏览器不兼容webp格式：

项目中有些图片是用webp格式存储的，IE浏览器完全不兼容。

我们要用各种图像处理软件改成jpg或者png格式的。
2.IE浏览器对Flex不友好：

如下图，IE10以下版本对flex不兼容。因项目中大量用了flex布局，导致一切换到IE9，界面布局立马乱套。

我是利用html的hack，引入了一个新的css文件，挨个给float吧。（注意清除浮动操作，别让特定的元素丢失高度）

3.IE9及以下对swiper插件兼容性问题：

在项目中，轮播图的板块还是比较多的，IE9以下，需要将swiper插件降级到2.x及以下。

所以代码就有了这样的块：
复制代码

  <link rel="stylesheet" href="{$WEB_URL}/Public/common/static/swiper/css/swiper.min.css">
<script src="{$WEB_URL}/Public/common/static/swiper/js/swiper.min.js"></script>
<!--<![endif]-->

<!--[if IE 9]>
    <link