兼容性

版权声明：转载请联系dongzhiliwansui@163.com https://blog.csdn.net/dongzhiliwansui/article/details/86560442 HTML5标签的兼容性解决方式 部分项目的要求是兼容低版本的IE浏览器，比如IE8之类的，但是项目中使用header、 nav等HTML5的标签，需要解决兼容。 查看what can i use 可以看到header等HTML5的标签 IE8等低版本浏览器不支持 使用document.createElement(tag)来解决 document.createElement('header'); header { display: block; } 分析： IE8等低版本浏览器不支持HTML5的部分标签， IE8浏览器认为header标签是个用户自定义的标签，所以显示的时候不支持， 这里通过document.createElement(‘header’)明确告诉它 这里是创建的标签 然后 针对header标签 设置对应的CSS样式为display:block。 注意一个小细节： script不能放在HTML5标签的下方，应该放在HTML5标签 header之类的 前面才可以正常显示， 即使用HTML5标签之前需要先写上方的JavaScript。 使用html5shiv库来兼容 <script

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。 碰到频率：100% 解决方案：初始化CSS的默认样式，*{margin:0;padding:0}。也可以使用其他网站的初始化代码。 备注：这个是最常见的也是最容易解决的一个浏览器兼容性问题。 问题症状：常见的是IE6中后面的一块被顶到下一行。 碰到频率：90% 解决方案：在float的标签样式控制中加入display:inline；将其转化为行内属性。 问题症状：IE6、IE7和遨游浏览器里这个标签的高度不受控制，超出自己设置的高度。 碰到频率：60% 解决方案：给超出高度的标签设置overflow：hidden；或者设置行高line-height小于你设置的高度。 问题症状：IE6里的间距比超过设置的间距。 碰到频率：20% 解决方案：在display：block；后面加入display：inline；display：table； 问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了margin：0；和padding：0也不起作用。 碰到频率：20% 解决方案：使用float属性为img布局。 问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容。 碰到频率：20% 解决方案

随着自己写过的页面的增多，也遇到了很多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

事件对象兼容 window.event只能在IE下运行，而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。Firefox必须从源处加入event作参数传递。IE忽略该参数，用window.event来读取该event。 解决的方法： event = event || window.event 阻止事件冒泡兼容 　　stopPropagation()和cancelBubble，前者是方法，是标准的写法，后者是属性，赋值true表示阻止，是IE的写法。 解决方法： 　　判断stopPropagation是否存在，如果存在则用标准写法否则则用IE的写法，不可反过来判断。 　　event.stopPropagation ? event.stopPropagation() : event.cancelBubble=true; 阻止默认行为兼容 　　preventDefault() 和 returnValue() 解决方法： 　 event.preventDefault?event.preventDefault():event.returnValue=false; 　　return false; 来源： https://www.cnblogs.com/gsdnb/p/11752531.html

在这里总结一下css布局时常见的浏览器兼容性问题 1 盒模型 IE6的盒模型和W3C标准的盒模型不同 W3C中的盒模型所定义的宽度和高度为内容区域的宽度和高度 但是盒模型的总大小为margin+border+padding+width IE的盒模型所定义的宽度和高度为盒模型的总宽度和总高度，width=margin+border+padding+content-width css3中box-sizing定义了盒模型的类型，其有两个值：centent-box（W3C）和border-box（IE6） 另外，W3C盒模型中div的背景颜色充满了padding和border区域，border透明时，可发现背景颜色就是div的bgcolor（包括border的部分）.（ie6不支持透明transparent） IE盒模型中的div背景颜色包括padding和border区域 2. input元素默认样式表现形式的不同 文本框 IE格式下的文本框 chrome格式下的文本框 我们可以发现IE格式下的文本框多了个叉叉，如果想删除该叉叉，可以使用input的伪元素 input::-ms-value { padding: 4px; } input::-ms-clear{ display: none; } 密码 当input的类型为password时，ie和其他浏览器的显示方式不同

https://github.com/sockjs/sockjs-client https://socket.io/ https://github.com/gimite/web-socket-js https://juejin.im/post/5aef0e9c518825673a20754d 方案 WebSocket使用SockJS原来可以这么简单 https://blog.csdn.net/dadiyang/article/details/83715569 来源： https://www.cnblogs.com/little-ab/p/11751184.html

javaScript兼容性问题 名称 高级浏览器 IE浏览器 获取DOM元素样式 getComputedStyle(dom) dom.currentStyle 事件监听 addEventListener attachEvent 移除事件监听 removeEventListener detachEvent 事件对象获取 e window.event 事件源 e.target e.slcElement 阻止冒泡 e.stopPropagation() e.cancelBubble=true - - - IE9及以上 阻止默认事件 e.preventDefault() return false / window.event.returnValue=false 获取网页可视区域高度 window.innerHeight document.documentElement.clientHeight 关于事件的e命名根据函数形参而定,e可以是任何名字 以下关于兼容写法 1.获取DOM元素样式 function getStyle ( dom ) { if ( window.getComputedStyle ( dom )) { return getComputedStyle ( dom ) } else { return dom.currentStyle } } 2.事件监听 function

最近在负责前端React项目开发，因为之前写RN的时候都是熟练使用Flex弹性盒子模型，转到React项目时自然地就直接用这个属性了。漏考虑了兼容性，待到测试同学拿着装ios8系统的iphone6手机测试的时候，那界面就全乱套了，我立马想到了 不兼容性，各种查询找到了针对移动端的解决方案（一般mobile的浏览器内核都要高一些） 因为iphone使用的也是webkit内核，解决方案如下： display: flex; display: -webkit-flex; // 适配低版本写法 flex- direction: column; -webkit-flex- direction: column; // 适配低版本写法 类似其他属性 都加下-webkit-xxx ... flex: 1 ; -webkit-box- flex: 1 ; -webkit- flex: 1 ; 来源： CSDN 作者： 少华一号 链接： https://blog.csdn.net/u012982629/article/details/80422930

今天发现<div style="background-color: #546F49; text-align: center; "><span >我是要显示的文字</span ></div>这句话在一般浏览器中是没有任何问题的，就是在iPhone手机浏览器中显示异常,不居中也就算了，文字稍微多点还会自动换行(还不到所在div的一半就换行)，查了好多兼容方式都没用，其中包括w3school上面的例子也看了，也没得到什么有用的信息。首先想到以前百度编辑器中的一个问题，就是自动换行问题，就把属性word-break:keep-all;加上不让它自动换行。发现起作用但是还是不居中。然后这样写就可以了： <div style="background-color: #546F49;"><p class="tips" style="text-align: center;word-break:keep-all;">我是要显示的文字</p></div>。 注意： text-align: center只能用在块级元素上起作用哦，所以要把span改成p。 来源： CSDN 作者： jurlon 链接： https://blog.csdn.net/jurlon/article/details/51083804

我们认为Android 3.0平板电脑操作系统在美国时间2011年2月22日的正式推出，对于Android手机应用程序开发者所象征的意涵是： 之前大家所开发过的 Android 手机应用，除了可以在 Android 智能手机系统之上运行外，也因为 Android 3.0 平板电脑操作系统的向下兼容之故，致使这些 Android 手机应用能跨足到 Android 平板电脑操作系统的新领域之中。 然而，Android官方认为这还不够！ 假若，专为Android 3.0平板电脑操作系统所开发的应用程序，能够兼容于其它Android智能手机操作系统之中，那么Android应用程序开发市场的广大疆域才可以真正地被开启。 但是，问题来了！ Android 3.0 SDK有很多专为平板电脑使用者界面所发展出来的API ，这些新的API并没有被定义在目前的Android智能手机操作系统之中。 除非，每一位Android智能手机的用户都有办法下载更新Android 3.0 SDK里头的API使用，要不然，这些Android平板电脑应用程序到了Android智能手机上，就只能望机心叹了！ 但是，全面性地更新Android智能手机系统版本，谈何容易！ 这个困境在于Android的开放性。 因为，目前全球市售的Android智能手机从Android 1.6 、Android 2.1 、Android 2