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(二维码大小变小):