zoukankan      html  css  js  c++  java
  • 项目兼容ie8技术要点

    好久没有写博客了,因为最近公司项目要调ie8兼容,一直在忙这事,终于竣工了,跟大家分享下这老掉牙的浏览器是如何搞定的。。。本人新手一枚,欢迎大家指教

    项目是使用的jeecg框架,后台使用的java,前端页面使用了bootStrap,jquery,easyui框架,页面是jsp+less+js,还用到了好多html5的新标记以及CSS3的新属性以及媒体查询。由于当时做项目时没有考虑ie8,所以改的过程中遇到了好多好多问题。刚拿到项目时谷歌运行没有问题,ie8一片惨白,不光没有样式,连字都没有。。。没有最惨只有更惨。不说废话了,上干货

    1.jquery

    项目之前所用的jquery为2.1.4版本,不兼容ie8(jquery2.0+都不兼容ie8),将所有页面jquery均换成1.10.2版本。

    2.bootstrap

    项目所使用的bootstrap是3.3.4版本的,为了兼容ie8做了如下设置

    a.将jsp页面加上了<!DOCTYPE html>

    b.设置元标签

    <meta
    http-equiv="X-UA-Compatible"
    content="IE=edge,Chrome=1" />

    <meta
    http-equiv="X-UA-Compatible"
    content="IE=Edge" />

    c.使用reponse.js使得支持媒体查询

    d.使用html5shiv.min.js使ie8支持html5新特性,注意:使用这个js后所有的html5新结构标记均变为行内元素,需要手动设置display:block;

    这样设置后不仅支持了bootstrap还使得ie8兼容html5和媒体查询。

    3.less

    之前使用的less是直接引入的less文件,并且引入less.js进行编译。但是less.js在ie8不能用,会报错。所以还是稳妥点,直接使用的css文件。我是通过在线less转css编译器转的。

    这样基本样式就差不多都出来了。

    4.iframe

    这个iframe之前给的height是百分比,但是ie8不支持iframe的高为百分比的写法。网上推荐了好多js设置高度的方法,我闲麻烦,写了个CSS,解决了这个问题

    [html] view plain copy
     
    1. iframe {  
    2.      100%;  
    3.     height:100%;  
    4.     display: block;  
    5.     position: absolute;  
    6. }  

    5.弹性布局问题

    由于之前没有考虑ie8,使用了大量的弹性布局,这回可惨了,没有简单办法,只能重写。

    弹性布局新老版本共三种,最新的display:flex;兼容ie 10+;过渡版本和老版本(box)都不兼容ie8.。。所以放弃吧,重新写布局好了。虽然弹性布局好用,但做项目一定要慎用flex

    6.做项目遇见的最大的坑,这个坑不愿别人,自己挖的自己跳。<哭泣>

    所有的都设置好了,页面就只有一小条,找了好久才找到问题。之前写代码马虎,<nav>少些了一半。智能伟大的谷歌没问题,到ie8这就惨了,就是不显示。找了好久,所以,写代码一定要认真些啦。

    7.CSS3

    CSS3的新属性和新选择器ie8是不支持的,解决办法换选择器呗,不行就给个id/class啥的,新属性不支持查资料说是引入PIE.htc的一个包,这个包有坑,我就没有使用。能用滤镜的就用的滤镜。用不了的就选择优雅降级啦。

    8.CSS hack

    还有最有一点,就是一定不要修改原文件代码,将所有新的需要给ie单独写的代码写到新文件中,然后通过头部注释引用

    <!--[if lte IE 8]>
    <![endif]-->
    用到的差不多就这么多了,想到了我会继续补充的。

    转自:https://blog.csdn.net/qq_38627581/article/details/75268088
  • 相关阅读:
    LeetCode——Generate Parentheses
    LeetCode——Best Time to Buy and Sell Stock IV
    LeetCode——Best Time to Buy and Sell Stock III
    LeetCode——Best Time to Buy and Sell Stock
    LeetCode——Find Minimum in Rotated Sorted Array
    Mahout实现基于用户的协同过滤算法
    使用Java对文件进行解压缩
    LeetCode——Convert Sorted Array to Binary Search Tree
    LeetCode——Missing Number
    LeetCode——Integer to Roman
  • 原文地址:https://www.cnblogs.com/honey01/p/9015037.html
Copyright © 2011-2022 走看看