http://www.sohu.com/a/330231789_120174705
在本人亲身跟进一些前端项目过程中，发现相同的项目在不同的浏览器中运行出来的展示效果不太一样。上网查询下发现这样的现象叫浏览器兼容问题。那么问题来了：为什么会有兼容问题呢？
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
x-ua-compatible 用来指定IE浏览器解析编译页面的model x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。 1、使用一行代码来指定浏览器使用特定的文档模式。 <meta http-equiv="x-ua-compatible" content="IE=9" > <meta http-equiv="x-ua-compatible" content="IE=8" > <meta http-equiv="x-ua-compatible" content="IE=7" > 2、在一些情况下，我们需要限定浏览器对文档的解析到某一特定版本，或者将浏览器限定到一些旧版本的表现中。可以用如下的方式： <meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" > <meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" > <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" > 使用这种写法，浏览器或者使用标准模式进行解析，或者使用 IE5 Quirks 模式进行解析。 3、为了测试，我们也可以使用下面的语句指定浏览器按照最高的标准模式解析页面。 <meta http-equiv="x-ua-compatible" content="IE=edge" > 4、多个模式的指定。我们可以用逗号分割多个版本，这种情况下，浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子，在IE8进行浏览时，将会使用IE7的标准模式进行渲染，因为他本身不支持IE9和IE10。 <meta http-equiv="x-ua-compatible" content="IE=7,9,10" > 参考： http://www.cnblogs.com/cocowool/archive/2013/04/25/3043832.html http://www.cnblogs.com/nidilzhang/archive/2010/01/09/1642887.html http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类： 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml> <head> <meta http-equiv=Content-Type content=“text/html;charset=utf-8″> <meta http-equiv=X-UA-Compatible content=IE=EmulateIE7> <title>百度一下，你就知道 </title> <script>var wpo={start:new Date*1,pid:109,page:‘superpage’}</script> <meta http-equiv=X-UA-Compatible content=IE=EmulateIE7> 可以打开百度，右键查看源码看下！我们可以看下文件头是否存在这样一行代码！ 这句话的意思是强制使用IE7模式来解析网页代码！ 在这里送上几种IE使用模式！ <meta http-equiv=“X-UA-Compatible” content=“IE=8″> 2. Google Chrome Frame也可以让IE用上Chrome的引擎: <meta http-equiv=“X-UA-Compatible” content=“chrome=1″ /> 3.强制IE8使用IE7模式来解析 <meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″><!– IE7 mode –> //或者 <meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode –> 4.强制IE8使用I
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
截图需要另外一个库：html2canvas.js2，注意必须使用版本为V0.4.1才能做到 IE9 兼容
HTML5学堂：如何优化前端页面 / 如何优化网页。作为前端开发人员来说，不但要开发出能兼容各大主流浏览器的页面，而且还需要懂得去优化前端页面。本文主要给大家讲解如何去优化页面。 1 前期准备 1.1 首页命名为index.html / index.htm / index.php等。 1.2 需要制作404页面。 1.3 文件夹结构合理。 1.4 命名使用英文且有语义性的单词，并提供参考文档。 2 结构 2.1 文件头部分 2.1.1 需要提供文档声明 2.1.2 设置utf-8的编码格式，并放置于titl
它表示所附加的声明具有最高优先级的意思，被浏览器优先显示（ie6不识别此写法） 语法：选择符{属性：属性值！important；}
本文总结了div+css布局时常见的IE6兼容性问题及解决方法，包括14个常见问题及相应的解决方法。
综述：虽然说被停止支持，但是不得不说的是，IE6的市场并不会随着支持的停止而立刻消散下去，对于WEB前端开发工程师来说，兼容IE6 兼容各个浏览器，依然是不得不面对的工作。
HTML5学堂：本文，我们将继续为大家总结介绍移动端的常见兼容问题，今天要提的是关于移动端HTML与CSS当中，遇到的一些常见兼容问题，主要包括取消电话号码的识别、取消邮箱识别以及横向rem的问题。 对于移动端的兼容问题，由于内容较多，决定书写成一个系列。在这些杂乱知识的发现与整理，主要来源于几个讲师平时的积累，而自己的学生们也为内容的充实做出了很大的贡献，在此非常感谢~！不再多说，一起进入今天的主要内容。 移动端兼容 - 取消电话号码识别 具体情形：在iPhone上页面中的数字识别为电话号码。 我们书写的
原文链接：https://wetest.qq.com/lab/view/433.html
HTML5学堂：最近讲师团队在学习JS类库的知识，因此就跟大家一起共享一下类库的搭建吧。今天要讲解的功能是：获取渲染后样式以及事件兼容处理。渲染后样式修正了通过style属性获取样式的不足，而事件兼容问题主要考虑了this的指向修正。 获取完成（渲染后）样式 在IE下，对于获取渲染后的样式，使用currentStyle进行获取，而对于FF，使用的是getComputedStyle方法进行获取。两者的语法并不相同。元素.currentStyle[属性]，也可以用点语法进行书写；而getComputedStyl
利用原始的文件上传处理，虽然通过原始js语句能实时显示上传图片，但是这样的话会涉及很多兼容问题。使用ajax技术，实现选择性删除所选图片功能，并不会有兼容问题。
产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先） 成本的角度 (有无必要做某件事)
一些字体图标库的网站 https://icomoon.io/app/#/select http://www.iconfont.cn/ http://www.bootcss.com/ http://w
移动端 表单兼容（上篇） HTML5学堂：从这篇文章开始，我们将为大家总结介绍移动端的常见兼容问题，今天要提的是关于表单的一些兼容问题，本文主要包括input文本框的bug；默认的按钮样式；IE10的文本框问题；默认高光样式的处理。 前面想说的一些话：自己有一个学生在接触移动端，也辛辛苦苦的总结出了一些移动端的兼容问题，发布了一篇手记似的博文，然后，没过多久就发现被各种网站复制走，各个网站也不加任何出处，也不进行文中错别字的修改，更不必说调整语言了。必须承认，互联网虽然给我们带来了不错的分享平台，但是也带来
在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。
原文链接：https://wetest.qq.com/lab/view/420.html
首先，动画事件主要包括以下三个animationstart，animationiteration和animationend事件，下面做简单分别介绍。
·使用link加载样式而不是@import（是css2提供的一种方式，不兼容，只能加载css，而且页面所有组件被加载完后才会被加载，完成前会导致‘闪烁’，link属于XHTML标签，没有兼容问题）；
就是刚好周末闲下来写篇文章吧，翻了翻以前写的demo，突发灵感，我觉得今天我可以憋一篇文章出来给大家，你们就当周末听相声吧。
【系列】移动端项目经验 表单兼容（下篇） HTML5学堂：本文，我们将继续为大家总结介绍移动端的常见兼容问题，今天要提的是关于表单的一些兼容问题，主要包括调用相册的按钮样式处理；占位符placeholder属性的行高问题；关闭iOS中键盘自动大写。 对于移动端的兼容问题，由于内容较多，决定书写成一个系列。在这些杂乱知识的发现与整理，主要来源于几个讲师平时的积累，而自己的学生们也为内容的充实做出了很大的贡献，在此非常感谢~！不再多说，一起进入今天的主要内容。 移动端兼容 - 调用相册的按钮样式处理 具体情形：
本文探讨了在项目中为hover元素添加边框的各种方法，通过不同的实现思路、兼容问题和代码实现，为读者提供了丰富的实用技巧。
2、调用方式：findKey(map对象,value值)，compare参数不用管它。
9.26~9.28 目的：想为社团做一个自己的宣传网站来迎新，同时积累UI设计经验 http://comesherry.xyz 感受或实际遇到的问题 （1）UIPC移动端兼容问题，（bootstrap 和layui提供的模块化帮助我搭建了自适应布局，不希望移动端出现的就不让它出现） （2）素材加载问题，图片视频导致网站加载缓慢（目前图片采用懒加载lay-src，视频预加载处理，并做了剪短处理） （3）图片大小一致性问题，大小不同杂乱，而且影响移动端响应式的展示。（word 的图片统一大小很好用）但直接修改图片尺寸图片质量会降低， 推荐方案：ps处理兼顾品质和尺寸，并且对不同端提供相同内容不同品质的图片；或者ps 文件>导出>web格式（选择jpeg）,品质和大小还是很可观的 （4）视频模糊，还想用，（加上浅灰色背景）视觉上有变强的感觉 （5）视频背景头一次用，还有待完善 （6）更加熟悉layui，但还不能跳出bootstrap他的范例，将功能实现在自己的框架上，而非他定义的容器中 （7）layui弹出层是最大的惊喜，boostrap封闭的结构不太令人舒服，layui的样式更加自由丰富 (8)1M带宽服务器不推荐图片展示，目前已经换成1～5M轻量级服务器了，打开速度快点不止5倍
由于手机屏幕尺寸过小，使用原始分辨率会使得页面显示过小，因此使用了逻辑分辨率，用倍数放大的方法来保证兼容性。
我们设置了justify-content: center;，不同机型显示区别如下：
HTML5学堂：从JS的逻辑层来说，移动端远远不如PC平台，但是“恐怖的”兼容问题是移动端最为头疼的地方。本文介绍iPad与iPhone的默认按钮样式的处理方法。关于兼容问题，我们很建议大家在开发的过程中记录下来，并定期整理总结。移动端很新，兼容问题也有很多是未知的，只有长期不断的积累才能够有所成长。 iPhone、iPad的按钮存在默认样式，如何去除默认样式呢？ input[type="button"], input[type="submit"], input[type="reset"] { -w
不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种，一是渲染引擎，一个是js 引擎，内核更加倾向于说渲染引擎。 常见的浏览器内核可以分为这四种：
前端对于网站来说，通常是指网页，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。
实现思路：为元素中预先设置边框，边框的颜色与元素所在父元素背景色一致，边框大小与hover时候的边框大小一致，鼠标hover过元素的时候只需要设置边框颜色便可。 兼容问题：无 实现代码：
本文探讨了在项目中为hover元素添加边框的多种实现方法，包括通过预设置边框颜色、使用伪元素、定位元素和改变盒模型属性等方式。同时，文章也讨论了在不影响布局的情况下为hover元素添加边框的实用技巧。
说明： 这是本系列的第一篇文章，我会尽快发后续的文章。 源起 1.加快葬送IE6浏览器的进程 世界上使用IE6浏览器最多的地方在中国 中国使用IE6浏览器最多的地方在企业中 让他们自己去装个chorme太难了 索性开发个浏览器（其实是浏览器的外壳）给他们 用"代码改变世界"是博客园园友的口号 2.一劳永逸的解决浏览器兼容问题 各种浏览器的CSS hack问题再也不用担心了 甚至公司里前端的职位也可以减少几个了 3.更方便的使用更强大的HT
jQuery是JavaScript的一个库，jQuery 极大地简化了 JavaScript 编程。我们在做网站或web应用的过程中，需要用JavaScript为我们完成一些用户与页面的交互效果，jQuery库可以让我们用更少的JavaScript代码完成更多的功能。
在CDH集群中所有节点/opt/cloudera/anaconda3部署了Python3的安装包，如下描述：
HTML5学堂：AJAX主要是两个兼容问题，其一是AJAX请求的创建，其二是加载状态的检测。本文主要讲解AJAX兼容的方法的搭建。 AJAX请求的创建 大部分使用AJAX的人都会使用new XMLHttpRequest()的方法进行AJAX的创建。这种方法能够很好的兼容IE7以及IE7+的浏览器，但是却没有办法处理IE7-的低版本浏览器。对于当前，我们已经摆脱了IE6的困扰，所以这个兼容问题也不再是那么严重，在这里仅仅做一个介绍。 IE5是第一款引入AJAX的浏览器，在IE5中，需要通过ActiveX对象实
定时让网页在3秒内跳转到mozilla首页(http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。)
WordPress程序是当前使用率最高的CMS系统之一，因开发功能完善，WordPress模板和插件众多而著称，茹莱神兽做三个网站，其中有两个网站使用的是WordPress程序搭建，可见它的受欢迎程度。
每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。
MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架，超轻量级、高度提炼，一套API优雅支持UDP 、TCP 、WebSocket 三种协议，支持iOS、Android、H5、标准Java平台，服务端基于Netty编写。
HTML5学堂：2015年，IE6已经黯然退市。不过，IE6的兼容问题，个人认为还是应当有所了解的。一方面，前端这个工作，并不能够仅仅了解现在，应当有一个较好的知识沉淀。另一方面，我们几个讲师一直将IE6作为辅助测试的工具-如果子级盒模型大小超出了父级大小，那么在IE6下必然是崩溃的。对于这种低级错误，虽然其他浏览器都能够处理和调整，但是却绝不是一个专业开发人员会犯的~ margin双倍间距bug IE6存在不少的兼容问题，今天要说的是IE6的横向双倍外边距。 触发条件 当浮动元素的浮动方向和浮动边界的方向
还记得上周咱们说的“随心所欲滚动条，远离产品汪”一文吗？当中介绍了自定义滚动条的基本原理与实现方法，在自定义滚动条实现后，可以通过对滚动条的上下拖动来控制内容区的显示，使用过的朋友会发现，如果对篇幅较长的内容来说，不停的拖动滚动条来查看内容，还是比较麻烦的，于是本文在上篇代码的基础上添加了滚轮事件并处理了相应的兼容问题。 本文内容 1、原理结构图 2、滚轮事件及兼容问题概要 3、具体实现步骤 4、小结 原理结构图 为了方便大家熟悉理解，希望大家能够回顾下上篇“随心所欲滚动条，远离产品汪（一）”，本文继续使用
1.accept=”application/msexcel” 2.accept=”application/msword” 3.accept=”application/pdf” 4.accept=”application/poscript” 5.accept=”application/rtf” 6.accept=”application/x-zip-compressed” 7.accept=”audio/basic” 8.accept=”audio/x-aiff” 9.accept=”audio/x-mpeg” 10.accept=”audio/x-pn/realaudio” 11.accept=”audio/x-waw” 12.accept=”image/gif” 13.accept=”image/jpeg” 14.accept=”image/tiff” 15.accept=”image/x-ms-bmp” 16.accept=”image/x-photo-cd” 17.accept=”image/x-png” 18.accept=”image/x-portablebitmap” 19.accept=”image/x-portable-greymap” 20.accept=”image/x-portable-pixmap” 21.accept=”image/x-rgb” 22.accept=”text/html” 23.accept=”text/plain” 24.accept=”video/quicktime” 25.accept=”video/x-mpeg2″ 26.accept=”video/x-msvideo”
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
