首页 > 其他分享 >【Web】前端框架对微软老旧浏览器的支持

【Web】前端框架对微软老旧浏览器的支持

时间:2023-05-02 13:56:03浏览次数:49  
标签:Web 插件 浏览器 老旧 IE8 Bootstrap IE6 排版

零、原因

最近要做一个项目,要能在学校机房运行的,也要在手机上运行。电脑和手机,一次性开发,那最好的就是响应式前端框架了。手机和正常的电脑兼容性问题应该都不大,但是学校机房都是Win7的系统,自带的都是IE8的浏览器。虽然有安装谷歌浏览器、360浏览器啥的,但是默认的还是IE浏览器。这就有一个问题,就是在你用极域电子教师发送指令让学生机打开某个网页时,用的就是IE,当然可以告诉学生复制地址到谷歌浏览器里打开,但是就还是有很多学生不懂怎么复制,怎么打开。索性让项目兼容IE得了,故此对前端响应式框架技术(Bootstrap、Layui)进行了一定的探索,也是对之后项目技术选型的一次简单调查吧(之前新建项目都要选好久用啥框架QWQ)。

壹、Edge

先使用2023年的Edge给出目标效果,顺便讲讲官方文档中对浏览器兼容性的介绍。
前端框架主要分成排版(样式)和插件(可能需要JavaScript支持的某些组件)两部分,本次选取前端框架的某些具体示例看支持的程度如何(简单测试,测试得不全面)。

  1. Layui 2.7.6
    官方文档中明确不支持IE6 / IE7。
    插件
    Layui
    排版
    Layui

  2. Bootstrap 2.3.2
    官方文档上只说支持的浏览器中包括IE7。
    排版
    Bootstrap2
    插件
    Bootstrap2
    排版
    Bootstrap2

  3. Bootstrap 3.4.1
    Bootstrap3 介绍是支持IE8 - IE11的。
    排版
    Bootstrap3
    排版和插件
    Bootstrap3
    插件
    Bootstrap3

一、IE6(Windows XP 自带)

IE6,中文名:网络探路者6,2001年8月27日IE6发布,同年10月25日WinXP发布,集成IE6。2008年4月28日为Windows XP发布最后的SP3,集成IE6 SP3(版本号6.0.2900.5512),次年发布IE8。IE6包括增强的DHTML,以及对CSS 1、DOM 1和SMIL 2.0等的部分支持,MSXML也提升到了3.0版本。由于IE6的种种新特性,并且网页开发技术也大大提高。当时的网页开始多样化、丰富化。

  1. Layui 2.7.6
    Layui IE6
    Layui IE6
    部分常规排版可用,一些高级组件用不了。

  2. Bootstrap 2.3.2
    无法访问
    bootstrap中文网访问不了,可能是IE6对https支持不太好,后面再刷新就是空白的了,因此使用的自己写的一些bootstrap2网页。
    Bootstrap2 IE6
    Bootstrap2 IE6
    一些组件用不了。
    Bootstrap2 IE6
    某些排版也用不了,上面的导航栏还是我修改后的。

  3. Bootstrap 3.4.1!
    Bootstrap3 IE6
    排版是乱的,导航栏没有修改。
    image
    部分排版可用。
    image
    插件算部分能用的状态吧。

总结就是要兼容IE6,难!很多框架都不对IE6支持了。

IE8(Windows 7 自带)

IE8支持或加强很多当时网页新技术(如对PNG Alpha支持的改进使在显示PNG图片时CPU不会飙升到100%,完全通过Acid2测试)。IE8还是微软第一个公开Trident引擎版本的IE,使用Trident 4.0内核。IE8在HTML5、CSS 3等技术方面仍落后于其他浏览器对手(诸如Acid3最初只有20分,即使Acid3改进了算法后也只有23分,HTML5测试虽然比IE7高,但也只得43分)。IE8是支持Windows XP最后的IE。

  1. Layui 2.7.6
    Layui IE8
    Layui IE8
    基本没啥问题,插件和排版都能用。

总结:能用

  1. Bootstrap 2.3.2
    Bootstrap2 IE8
    Bootstrap2 IE8
    Bootstrap2 IE8
    插件部分可用,排版部分混乱。

  2. Bootstrap 3.4.1
    Bootstrap3 IE8
    Bootstrap3 IE8
    Bootstrap3 IE8
    基本没啥问题,插件和排版都能用。反而Bootstrap3比Bootstrap2要支持得更好些,哈哈。

IE11(Windows 8.1 自带)

IE11扩大对HTML5和CSS3的支持,且添加的这些新特性多数均是非常新潮的特性(如HTML5拖放,HTML5全屏,CSS边框图,视频码率控制,视频字幕隐藏,媒体加密,WebGL等等),使得IE11在显示HTML5网页时基本不出现到处不支持的问题。IE11在功能上新增对Google的SPDY协议的支持,对Chakra进行了更多优化,硬件加速渲染相比IE9和IE10更快,在同样多加载项的情况下,IE11网页加载速度已超过WebKit和Blink内核浏览器,支持在后台智能预判并迅速在内存中取出已经看过的网页而不需要重新连接网站加载。使用全新的UA(用户代理识别字符串)绕开网站用来判断旧版IE的CSS Hack,而使IE在浏览旧版网站时返回与FireFox相同的页面。全新的F12开发人员工具以新颖的界面和非常直观的图形化指示帮助开发人员迅速对网站运行情况进行监控并及时优化,尤其是"仿真"功能类似过去的"兼容性视图",但功能更强大,可以在PC中显示与Windows Phone或XBox相同的页面,更改页面显示方向和分辨率,还可以模拟GPS定位以测试网站跟踪位置功能是否正常。

  1. Layui 2.7.6
    Layui IE11
    Layui IE11
    支持得很好的样子,插件和排版都没问题。

  2. Bootstrap 2.3.2
    Bootstrap2 IE11
    Bootstrap2 IE11
    Bootstrap2 IE11
    没多大问题,都还算正常。

  3. Bootstrap 3.4.1
    Bootstrap3 IE11
    Bootstrap3 IE11
    导航栏排版有点小问题,这个我在开发的时候也做了挺久的,开发的时候用的Edge。
    Bootstrap3 IE11
    小问题,或许开发的时候应该针对性地调整一下(真麻烦)。

总结:还好

伍、总结

Bootstrap3 和 Layui2 还是在维护中的,最老支持到 IE8,WinXP 能装 IE8(那直接装谷歌更好了),Bootstrap2 最老支持到 IE7,但是实际用的时候还是得针对性调整。本次测的前端框架都不支持 IE6 了,排版勉强能用用吧。如果不是必须的需求,建议升级浏览器,放弃使用IE(除非它起死回生)。

陆、参考资料

IE浏览器

Bootstrap

Layui

标签:Web,插件,浏览器,老旧,IE8,Bootstrap,IE6,排版
From: https://www.cnblogs.com/minuhy/p/17367602.html

相关文章

  • unity发布到4399的webgl模式问题:FRAMEWORK.JS中的WEBREQUEST_SEND括号内的函数(不能有
    在发布4399的时候,之前遇到过这个问题,解决方法当然就是删除这个函数啦。步骤也很简单,但是刚开始摸不着头脑搞了好久,最后发现发布的时候有个加密选项,选择不加密,后面build的文件里面就可以进行打开修改,按照要求修改函数即可。......
  • 解决web项目上的小蓝点没了的问题
    设置中打开,ProjectStructure 里面的web项目没了啊,我靠,我都不知道为什么。没关系,创建一个就可以了,就会出现一个这样的小蓝点......
  • websocket介绍
    特点:1.可以在浏览器里使用2.支持双向通信3.使用简单全双工异步通信,tcp协议服用http握手通道优点:1.双向通信,实时性更强。2.更好的二进制支持3.较少的控制开销。连接创建后,ws客户端、服务端进行数据交换时,协议控制的数据包头部较小。在不包含头部的情况下,服务端到客户端的......
  • 2022年Web前端开发流程和学习路线(详尽版)
    本文的最新内容,更新于2022-06-27,会在GitHub上同步更新,欢迎star。大家完全不用担心这篇文章会过时,因为随着前端领域的技术更新,本文也会随之更新。前言前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理。理论上,面向用户的产品里,所有问题(包括产品、设计、后端......
  • DataWindowHTTP(三)服务器安装-WEBSERVER
    本组件需要的一个webserver+PHP环境,版本要求为apache2.4+PHP8.0。可以通过两种方式安装:自动安装包(一键安装包)一键安装包有:XAMPP,PhpStudy,Appserv,wampserver,wnmp,DedeAMPZ,LNMP(linux)。到目前较多为apache2.4+php7.x,很快应该会支持到最新的php8.x。二.手工安装配置手工配置,不依赖其他工......
  • JavaWeb复习笔记
    MysqlsqlDDLDMLDQL约束设计多表查询内连接外连接子查询事务......
  • 启动Tomcat报WEB-INF\lib\j2ee.jar jar not loaded异常的解决办法
    今天加载工程时突然发现Tomcat报:2010-7-112:11:38org.apache.catalina.loader.WebappClassLoadervalidateJarFile信息:validateJarFile(C:\ProgramFiles\ApacheSoftwareFoundation\Tomcat6.0\webapps\accountant\WEB-INF\lib\j2ee.jar)-jarnotl......
  • JetBrains 公布 WebStorm 2023.2 路线图
    JetBrains已公布了WebStorm2023.2版本的路线图,以便用户可以率先了解到官方的规划以及能够预览一下未来能够用上的新功能。主要聚焦于以下内容:稳定的新 UI。这是此版本中的优先事项之一。CSS嵌套支持。WebStorm2023.2计划将添加对 CSS嵌套功能的支持( WEB-57875 ......
  • 【web 开发基础】PHP自定义回调函数之call_user_func_array()
    前言从上一篇文章中我们了解到,回调函数是将一个函数作为参数传递到调用的函数中。如果在函数的格式说明中出现callback类型的参数,则该函数就是回调函数。虽然可以使用变量函数去声明自己的回调函数,不过我们通常大多还是会通过借助 call_user_func_array() 函数去实现。通过借助......
  • 云原生之使用Docker部署webssh工具sshwifty
    (云原生之使用Docker部署webssh工具sshwifty)一、sshwifty介绍1.sshwifty简介sshwifty是一款WebSSH&Telnet(WebSSH&WebTelnet客户端工具。2.shwifty特点shwifty是为Web设计的SSH和Telnet连接器。它可以部署在您的计算机或服务器上,为任何兼容(标准)的网络浏览器......