前端兼容

之前在网上看到一个博主写的前端通用的下载文件的方法，个人觉得很实用，所以mark一下，方便以后查阅 源文地址 （源文还有上传/下载excel文件方法） 因为项目要求要兼容IE浏览器，所以完善了一下之前博主的方法 IE 浏览器：使用微软自带的msSaveBlob 方法，a标签的download属性不支持IE 谷歌浏览器（只测试过谷歌）：创建a标签 ，添加download属性，模拟鼠标点击事件 　　 //这里res.data是返回的blob对象 var blob = new Blob ([ res . data . fileData ], { type : 'application/json;charset=utf-8' }); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型 var href = window . URL . createObjectURL ( blob ); //创建下载的链接 if ( window . navigator . msSaveBlob ) { try { window . navigator . msSaveBlob ( blob , 'model.json' ) } catch ( e ) { console . log ( e )

hack 速查表 ˼·: @media screen and (min-width:0\0) and (min-resolution: +72dpi) { /*IE9+ CSS*/ .carController { width: 500px; } .el-switch { width: 300px !important; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .carController { width: auto !important } } 比如上面是之前人写的ie向上兼容方案，结果ie11出了问题不兼容,然后下面一条写的是ie10向上兼容方案，完美解决

前言： 　　近期，小弟根据GitHub、前端社区、掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总（ps：前端UI框架的应用是通过GitHub star数，社区热度和使用范围等进行的粗略的汇总【不分先后】）。希望对寻找UI框架的小伙伴们提供点帮助。 　　以下对前端UI框架的移动端、PC端和混合APP的应用进行了列举。 移动端UI框架 Mint UI（饿了么团队） 　　中文官网： http://mint-ui.github.io/#!/zh-cn 　　描述：基于vue的移动端UI框架 　　基于vue 　　组件库：　　　　 　　 　　GitHub地址： https://github.com/ElemeFE/mint-ui/ 　　star：8705，fork：1810 　　latest commit 2017.12.6 6pm 　　32 contributors 　　预览： 　　　　 http://elemefe.github.io/mint-ui/#/ 　　基础引入： 　　　　CDN: <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/mint-ui/lib

嘿，大家好~ 既然点击来了，不妨就继续看下去把~ 作者：along csshack 我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chromeff safari opera等） ◆IE6认识的hacker 是下划线_ 和星号 * ◆IE7 遨游认识的hacker是星号 * 比如这样一个CSS设置： 1.height:300px;*height:200px;_height:100px; IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px； IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。 FireFox

随着自己写过的页面的增多，也遇到了很多CSS兼容性的问题。这些兼容性问题，都是必然的，因为技术在不断进步，不断革新，所谓，“后浪推前浪，前浪拍死在沙滩上”，当然我们的技术不能是被拍死在沙滩上，我们还要支持，不支持的话，只能是你这个页面，这个产品被淘汰。 那么为了不被淘汰，我们就要做些兼容性处理。 我写页面的时候用到过很多的 flex 布局，觉得非常好用。下面附上一篇不错的 flex 布局介绍的文章。 Flex 布局教程 想了解的可以自己去看看这篇博文，或者自己百度，这里先部多做介绍，我们主要来说一说 flex 布局的兼容性问题。 why? 大家可能想问了， flex 布局为什么会存在兼容性问题啊？ 之所以存在兼容性问题，是因为技术在不断的更新，有些旧的浏览器只支持旧语法的书写方式，所以就出现所谓的 兼容性问题 。 what？ 那么新旧版本是什么？ flex布局分为旧版本 dispaly: box; ，过渡版本 dispaly: flex box; ，以及现在的标准版本 display: flex; 。所以如果你只是写新版本的语法形式，是肯定存在兼容性问题的。 Android 2.3 开始就支持旧版本 display:-webkit-box; 4.4 开始支持标准版本 display: flex; IOS 6.1 开始支持旧版本 display:-webkit-box; 7.1

注意：因为浏览器问题，重新定义Array.prototype.indexOf…等函数时，一定要注意符合原始定义，不要随便用别的实现方式定义，否则可能会影响插件调用 之前开发项目时，前端调试都是以google chrome浏览器为准，现需处理浏览器兼容问题，现将遇到的问题总结如下： 一. firefox 浏览器div下的table无水平滑动条 < div id = "tableContainer" style= "height:420px;width:100%;" class = "table-responsive" > <table id = "demoTable" class = "table table-condensed table-bordered" style= "width:1650px;" > 原因：bootstrap中添加了样式 .table { max-width : 100 % ; } 解决方法：去掉table中的table类属性。 二. IE下无法用AJAX表单上传文件 解决方法：（1）用form表单post提交上传文件 （2）将 <meta http-equiv="x-ua-compatible" content="ie=7" /> 替换为 <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <

1、阻止冒泡的方法。 function stopBubble(e){ e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); //W3C阻止冒泡方法 }else { e.cancelBubble = true; //IE11一下阻止冒泡方法 } } 2、IE8只支持 jquery 1.9.x版本。 <!-- IE8只能支持jQuery1.9 --> <!-- [if lte IE 8]> <script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script> <![endif] --> 3、让IE6~8支持部门css3选择器： 使用 selectivizr（百度搜） < script type ="text/javascript" src ="[JS library]" ></ script > <!-- [if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="selectivizr.js"></script> <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> <!

如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ： 1. viewport： 也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域， 这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个： width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素） height - // viewport 的高度 （范围从223 到10,000） initial-scale - // 初始的缩放比例 （范围从>0 到10） minimum-scale - // 允许用户缩放到的最小比例 maximum-scale - // 允许用户缩放到的最大比例 user-scalable - // 用户是否可以手动缩 (no,yes) 那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如： <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> //编码 <meta

前言 灵活运用CSS开发技巧 请戳这里，持续更新 灵活运用JS开发技巧 请戳这里，持续更新 何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。 烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情 等，这些应该都是我们从小到大写文章而接触到的写作技巧。 作为程序猿的我们，写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满(哈哈，这个才是重点)。因此，我整理下三年来自己使用到的一些 CSS开发技巧 ，希望能让你写出耳目一新、容易理解、舒服自然的代码。 目录 既然写文章有这么多的写作技巧，那么我也需要对 CSS开发技巧 整理一下，起个易记的名字。 Layout Skill ： 布局技巧 Behavior Skill ： 行为技巧 Color Skill ： 色彩技巧 Figure Skill ： 图形技巧 Component Skill ： 组件技巧 备注 代码只作演示用途，不会详细说明语法 部分技巧示例代码过长，使用

不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。 常见的浏览器内核： 不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。 1.不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案：CSS里 *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。 2.块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 问题症状:常见症状是IE6中后面的一块被顶到下一行 碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题） 解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性 备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。 3.设置较小高度标签（一般小于10px），在IE6