博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端笔记-201807
阅读量:6622 次
发布时间:2019-06-25

本文共 2589 字,大约阅读时间需要 8 分钟。

1、css浮动

    
Document

运行效果:

解决办法1:

解决办法2:

    
Document
    

个人比较推荐使用方式2,使用方式1是维护原有项目

最终运行效果:

 

2、@media媒体查询不兼容ie8及以下

参考:

使用 respond.js  解决 ie8媒体查询的兼容问题;

1) 需把文件置于服务器上运行。由于安全限制,一些浏览器可能不允许respond.js以 file:// 方式运行(因为它使用 xmlHttpRequest)

以 file:// 方式运行在ie8下会报错SCRIPT5:拒绝访问。

2)包含媒体查询的 css文件需 采用外链形式,

3)引用的respond.js 需置 于媒体查询 css 文件之后;

4)引用的respond.js 文件必须放在本html页内,如shtml文件提出公共部分后则无效。(该条未验证)

respond.js目前只支持媒体查询里的一部分属性,如min-width、max-width和媒体类型 (screen、print等) ,转换这些属性来解决不支持媒体查询的浏览器的兼容问题。(该条未验证)

 

3、jQueryRotate插件实现转盘抽奖(能够兼容ie8)

1)引入jQueryRotate.2.2.js

2)转动关键代码

$("#lotteryBtn").rotate({    angle:0,     duration: 5000,     animateTo: angle+2160, //angle是图片上各奖项对应的角度,2160是我要让指针旋转6圈    callback:function(){        // 转动结束回调函数    }});

 

4、微博话题墙

参考链接:

Step 1. 网站接入

Step 2. 绑定域名

Step 3. 增加命名空间

在您页面的HTML标签中增加XML命名空间:<html xmlns:wb="http://open.weibo.com/wb">

Step 4. 部署wb.js

在您的页面部署wb.js,同时,如果您的页面编码不是UTF-8,请添加charset="utf-8"属性。

<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=YOUR APPKEY" type="text/javascript" charset="utf-8"></script>(appkey是否需要?)

Step 5. 使用Jssdk或微博组件

部署微博话题墙组件()

使用:(紫框中部分可以修改组件背景颜色和链接颜色,具体可进一步研究)

微博话题墙组件不兼容ie8(是否有解决方案?)

 

5、git clone xxx --depth=1

depth用于指定克隆深度,为1即表示只克隆最近一次commit(git clone下载内容过大时,这样可以提高速度)。这样仅获取最新版和一个历史版本,即最后2个版本。

 

6、css问题

1)图片垂直居中(可兼容ie8)

 

7、极验验证

 

8、js用POST方式页面跳转,避免在地址栏中显示传递参数

form以post方式提交表单

var data = { // 要传递的数据    product_id: product_id,    num: 1};var form = $("
");form.attr('action', '【跳转页面路由】');for(var p in data) { var input = $(""); input.attr('name', p); input.val(data[p]); form.append(input);}$('body').append(form);form.submit();

 

9、生成二维码

方式一:jquery.qrcode.min.js

1)引入jquery.min.js和jquery.qrcode.min.js

2)根据链接codeUr生成二维码

$("#pay-qrcode").qrcode({width:170, height:170, render:"canvas", correctLevel:1, text:codeUrl});

上例是使用canvas渲染二维码,但是canvas不兼容ie8。

$("#pay-qrcode").qrcode({width:170, height:170, render:"table", correctLevel:1, text:codeUrl});

为了兼容ie8,可以用table渲染二维码,我们会发现二维码实际是使用table表格把每一个二维码的点画出来,这就导致网页上的Dom元素会特别多。生成的二维码大小和canvas方式一样大。

方式二:qrcode.min.js

1)qrcode.min.js

2)根据链接codeUr生成二维码

var qrcode = new QRCode(document.getElementById("pay-qrcode"), {    width : 170,    height : 170});qrcode.makeCode(codeUrl);

ie8以上浏览器:

 

 

ie8(二维码大小变小):

 

转载于:https://www.cnblogs.com/colorful-coco/p/9275129.html

你可能感兴趣的文章
使用 will-change 来提升浏览器渲染效果
查看>>
Animation总结(差值器和估值器)
查看>>
Java数据结构与算法(十)-图
查看>>
4.1 在SELinux中客体类存在的目的
查看>>
如何用iPad运行Python代码?
查看>>
PHP学习3——数组
查看>>
E-HPC支持多队列管理和自动伸缩
查看>>
Maven的插件:命令行执行
查看>>
各种设备的CSS3MediaQuery整理及爽歪歪写法
查看>>
CVE-2017-8464远程命令执行漏洞(震网漏洞)复现
查看>>
Java 12 将于3月19日发布,8 个最终 JEP 一览
查看>>
基础为重,Python的基础,成就月薪过万
查看>>
Android--ListView内容刷新问题
查看>>
React 性能优化大挑战:一次理解 Immutable data 跟 shouldComponentUpdate
查看>>
【视频教程】微信小程序开发-框架篇2 WXML
查看>>
bboss session版本构建和demo部署运行介绍
查看>>
Android--Xutils3源码案例调试
查看>>
moreco 0.0.1 发布,实现 RBAC、JWT 鉴权等功能
查看>>
linq to entity常用操作
查看>>
Java并发之CountDownLatch、Semaphore和CyclicBarrier
查看>>