ie8 升级页面html,一个需要兼容到IE8的项目
从未兼容过IE8的girl,在看到自己满心欢喜写的页面在IE8里打开的时候,是崩溃的。
兼容的过程经历下来有一种洗心革面、破茧成蝶的感觉(尴尬而不失礼貌的微笑脸)。
1.html中的注释怎么判断IE8/非IE8
lang="zh-cmn-Hans">
如上,[if lt IE 8]的意思是:小于或等于。[if (gt IE 8)|!(IE)]的意思是:大于(切不包含)IE8,或,非IE8。至于lte、gt都是什么意思呢?
gt: greater than,选择条件版本以上版本,不包含条件版本
lt: less than,选择条件版本以下版本,不包含条件版本
gte : greater than or equal,选择条件版本以上版本,包含条件版本
lte : less than or equal,选择条件版本以下版本,包含条件版本
! : 选择条件版本以外所有版本,无论高低
&:并
|:或
():子表达式
在这里留个问题给今后的自己(偏偏在问了俊哥的时候豁然开朗):
为什么有些注释是这种写法
something doesn't show in ie
而有些确是
2. 一个关于meta的故事
对于360浏览器来说,意味着在360浏览器中启用极速模式(页面默认用极速核),取之的有IE兼容内核:和IE标准内核:
3. 学会观察控制台中的render
故事的起因是这样的:
前提:页面有一个每秒一次的定时器。
我呢用了一个外引得超细字体,发现这些字体每秒都会闪一下(文字粗细颜色深浅来回转换)。这个现象被文博一眼看透,他说“闪烁,说明浏览器每秒都在渲染这个区域,看下rendering吧...”
两步:
找到控制台中的Rendering
勾选上Paint flashing之类的
Rendering
Paint flashing
勾选上了paint flashing之后会发现,那个定时器造成了几乎整个页面的每秒渲染一次。这个时候那个神奇的要使用will-change的原理就浮出水面了。所以解决办法之一,就是在定时器作用的上加上will-change: transform
4. 不要高估IE8/9对伪元素的渲染能力
为什么这么说呢?
用伪元素span::before的transform:translateY()模拟数字滚轮(当然在IE8/9中,我乖乖地把transform改为了top):
发现在IE11的模拟器下模拟IE8/9的时候,浏览器可以准时并精准地把某一时刻::before的top位置渲染出来。然而在真实的浏览器中,IE8卡!住!了!(IE9甚至渲染找不到top位置,一次都赋值不上!)就连强制执行$targetElem.offsetLeft以求强制render,也是没有任何效果的。
无奈之下,只能在IE8/9中放弃伪元素,直接把数字innerHTML到相应的span中。
所以结论是,如果想要页面兼容IE8/9并且带有动画的话,慎用伪元素的定位变化。
5. a标签中的rel="noopener noreferrer"
vscode中一些插件(如HTML Snippets)已经把a:blank的补全自动加上了该属性。
可以看下此文的解释:
当给a标签加上target="_blank"的时候,待跳转的页面是可以通过window.opener获取到当前页面的部分访问的。所以,新开的tab页也就能够再用window.opener.location跳转到其他(比如某个钓鱼的)网页,或者代表当前页面执行一些JS操作。而用户往往是信任从当前页跳转的新tab页的。
比如,用一个萌猫的图片吸引你分享到facebook,然而当你在分享前需要登录的时候,却是一个fake的facebook登录页。如果你分不清的话,就是会乖乖地输入你的账号和密码的。
那么解决方式呢。。。
就是在target="_blank"的a标签中加上rel="noopener",鉴于FF是不认noopener的,所以还要为了FF加上noreferer,所以完整写来就是:rel="noopener noreferer"
举个例子实践一下:
new page a、page b。page a 中有一个target="_blank"的a标签,link到了page b,当点击链接打开新标签也就是page b的时候:
console in page b.png
试着在page b的console中输入window.opener.location,能够看到原页面page a的地址。然后,将window.opener.location设置为其他页面地址的时候,page a就乖乖跳转了:
page a的location发生了变化.png
在我们加上了noopener之后,新打开的page b中就无法访问到window.opener当中的属性了。
after set noopener.png
值得注意的是,用JS实现新建标签打开页面,也伴有同样的问题,所以我们不要直接用window.open('http://www.google.com'),而是要像这样:
var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;
6. 渐变的文字
所有的IE都不支持文字的渐变
优雅降级的处理方式是:-webkit内核者,渐变;IE核,纯色。
文字的渐变实际上是依靠背景的渐变来实现的:
background-image: linear-gradient(to right,#ffd823 30%,#0f9);:给文字设置一个渐变的背景
-webkit-background-clip: text;:文字以外的部分都cut掉
-webkit-text-fill-color: transparent;:文字部分设置为透明,以此来把背景部分透露出来。
不难看出,基本原理还是靠操作背景。所以不仅是文字渐变,镂空的文字也可以通过background: whatever;再加上-webkit-text-fill-color: transparent;-webkit-background-clip: text;来实现。
有关knockout text的实现可参考css-tricks上的这篇。
7. 帧动画的实现
帧动画,也就是把动画分解,每一帧做成一张图片,再把所有帧图拼成一个长图。最后利用改变background-position来实现动画。
举例:
animation: lightning 2s steps(20) infinite;
在animation中写下自定义的动画名lightning之后,设置一个steps(20)(表示一共执行20步,每一步的时间被2s平均分配)就可以了。
@keyframes lightning {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -3350px;
}
}
ps: 开发一定要和动效师确认好每一帧的停留时间(一般来说是40ms)。
ie8 升级页面html,一个需要兼容到IE8的项目相关推荐
- html在ie8下跳转新网址,ie8升级到ie11 单击“查看已安装更新”
IE升级不是版本越高越好,要适合当前系统的才是最好的. 您可以试试[百度电脑专家]一键修复升级. IE 升级到11, 想恢复到IE8 如何设置 首先打开IE11浏览器,然后点击上面的"工具& ...
- 页面水印 原生js 兼容ie8浏览器
需求缘由 项目是前后端不分离开发的,很老的项目,里面很多插件只能支持ie8,业主公司浏览器都是ie8 ,这次想给所有页面添加用户水印,所以开发需要兼容ie8 水印代码 创建一个js 文件waterma ...
- [html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由 两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护 个人简介 ...
- 现在实现flexbox 的策略和工具(flexbox兼容到IE8的跨浏览器解决方案)
原文:FLEXBOX IN THE REAL WORLD flexbox 相当好用,但是现在就可以用flexbox并且让它支持到IE8吗?如果你跟着下面的步骤,现在就可以开始用flexbox啦. 我介 ...
- 服务器升级中不能修改信息,服务器升级页面
服务器升级页面 内容精选 换一换 请使用Mind Studio的安装用户进行升级操作,在升级前请先登录到后台服务器,切换到root用户在/usr/bin目录下执行./add_sudo.sh usern ...
- Zclip:复制页面内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...
- video视频转成canvas(兼容至IE8+,全原生JS)
video视频转成canvas(兼容至IE8+,全原生JS) <!DOCTYPE html> <html lang="en"> <head>&l ...
- 用js调用摄像头实现拍照功能兼容到ie8
最近公司要求做个项目刷脸登陆要求既能兼容高版本浏览器,又要能兼容到ie8及ie以上,欧米噶,虽然ie让我脑壳疼,但是还是得解决,在网上看了很多资料,最终选用jquery.webcam来实现ie的拍照 ...
- Debian 3.1 (Sarge) 正式发布,Knoppix也升级到最后一个单CD版3.9
昨天晚上刚发现Knoppix升级到最后一个单CD版3.9,今天早上订阅的RSS就有新消息说Sarge发布了.呵呵,好消息,不过我又要忙活一阵子,调整系统了. Debian 3.1 (Sarge) Re ...
- Android之实现Room升级需要给一个表增加一个字段
1.需求 实现Room升级需要给一个表增加一个字段. 2.Room升级介绍 Room 持久化库中通过使用 Migration 类保存用户数据.每个 Migration 类指定起始版本和结束版本.在运行 ...
最新文章
- 32位浮点数在威纶触摸屏显示_MCGS触摸屏与与西门子 S7-1200 PLC以太网通讯
- linux拷贝文件夹怎么删除,linux文件及文件夹拷贝移动删除
- 在家做什么能让隔壁报警?| 今日最佳
- mysql的to datetime_mysql-笔记-datetime
- 拿到串口的数据如何解析_大数据解析如何租到“物美价廉”的好房?
- 115.不同的子序列
- 刚刚提取了金山毒霸的[垃圾清理] 和 [隐私清理], 分享方法,大家可以自己试一下
- 计算机培训心得ppt展示,ppt制作学习心得
- linux上java设置内存,linux 设置java内存
- FPGA学习笔记(1)简单的时序逻辑电路——流水灯
- cocoscreator热更新
- idea,eclipse中注解使用的计算机用户名修改
- 北京交通大学计算机学院硕士导师,北京交通大学计算机与信息技术学院研究生导师:王涛...
- 微信公众号代运营公司哪家好?
- 学java选i5还是i7_选笔记本电脑,到底CPU是要选i5还是i7
- 围观新版香港身份证与OCR识别完美搭配
- Deep-Person: Learning Discriminative Deep Features for Person Re-Identification
- matlab simulink 除法,第03讲 MATLAB-simulink的数值运算.ppt
- 退出python三种方法
- 做题记录 To 2019.2.13
热门文章
- Anaconda出现Navigator Error的解决办法
- ArcSight Recon
- 计算机应用 课件 .doc,计算机应用基础(计算机应用基础)课件.doc
- TLSF: Memory allocator real time embedded systems
- 从“鸿沟理论”看云原生,哪些技术能够跨越鸿沟?
- 腾讯微博开放平台开发者服务协议 2.1、3.6 解读
- 1032. 字符流(每日一难phase2--days28)
- DOS命令:doskey
- delphi IDE插件 cnpack 使用记录
- WindowsXP_KB909667_x86_ENU