关键词：
chrome,firefox,IE,360,等
1.@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
以此来识别IE10+以上的浏览器.但是注意,在该属性内的class,只会对没在该属性内的class的属性进行替代.如果比如:
.oper-wrap
position: absolute;
width: 100%;
display: grid;
display: -ms-grid;
grid-template-columns: 33% 33% 33%;
background-color: #1890ff;
bottom: 0;
opacity: 0;
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
.oper-wrap
position: absolute;
width: 100%;
background-color: #1890ff;
bottom: 0;
opacity: 0;
display: block; // 假设没有写该属性,则会默认是display:-ms-grid;ie 11能认识该属性,但却不能正确表现,so ...悲剧
- ant.design支持ie9(需要polyfills)以上.所以可以放心在9以上版本使用.在某些不兼容的地方自行修补;
1). table 在ie11中的表现会被内容撑开,使得长度超出屏幕;
<table style="table-layout:fixed"></table> - flex与grid
IE11部分支持(能识别 -ms-grid,但无法正常表现);在ie中基本放弃使用这个了.
https://juejin.im/post/5a3f494d6fb9a0450a678f8d --光是一个grid的兼容,就在这里介绍了很多;
flex的兼容性:
/* 父元素-flex容器 */
.flex
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
http://www.ayqy.net/blog/flexbox布局的兼容性/ —flex的内容又是这么多内容;
-
很大一部分中国网民使用的360浏览器;它有两种模式,一种是blink(webkit,也就是chrome)为内核的浏览模式.支持较好.一种是Trident(ie内核).可以用来模拟ie7,8,9,10,11各种浏览器.这种模式下, linear-gradient,animation等支持度不高,得自己想办法…
-
React doesn’t support IE8 anyway
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', /**/ React doesn't support IE8 anyway**
],
flexbox: 'no-2009',
浏览器兼容问题记录(代码片段)
...-contrast:none),(-ms-high-contrast:active)以此来识别IE10+以上的浏览器.但是注意,在该属性内的class,只会对没在该属性内的class的属性进行替代.如果比如:.oper-wrapposition:absolute;width:100%;display:grid;display:-ms-grid;grid-template-columns:33%33%33%;backgro... 查看详情
浏览器兼容(代码片段)
一、什么是浏览器兼容问题同一份代码，有的浏览器显示效果正常，有的浏览器显示不正常二、为什么会有浏览器兼容问题同一产品，版本越老bug越多同一产品，版本越新，功能越多。老的浏览器还没有这个功能，当然显示有误... 查看详情
浏览器兼容性问题(代码片段)
为什么会有兼容问题？由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要... 查看详情
取消edge浏览器输入框右边的叉和眼睛（与谷歌样式不兼容问题）(代码片段)
问题出现edge自带的样式覆盖了组件样式在css中使用伪元素选择器：::-ms-clear、::-ms-reveal 设置其display：none;即可，例如：input::-ms-clear,input::-ms-revealdisplay:none;edge越来越普遍，兼容问题愈发明显，特此记录 查看详情
浏览器不兼容问题和浏览器优化(代码片段)
...1、html兼容性问题问题：HTML5新的语义标签在低版本的老IE浏览器中存在兼容性问题解决方案：引用第三方解析库<scriptsrc="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>-2、css兼容问题1、图片问题a、图片下方有间隙... 查看详情
关于es6的兼容性问题(代码片段)
为什么ES6会有兼容性问题？由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布，而到了今天，我们在编程中如果使用了ES6的新特性，浏览器若没有更新版本，或者新版本中没有对ES6的特性进行兼容，那么浏览... 查看详情
关于浏览器兼容性问题(代码片段)
阅读目录 1.Web标准以及W3C 2.主流浏览器内核 3.标准模式（StandardsMode）和怪异模式（QuirksMode） 4.CSS盒模型 5.重置浏览器样式 6.HTML语义化&nb 查看详情
浏览器兼容性问题(代码片段)
使用meta标签来调节浏览器的渲染方式，告诉浏览器用哪种内核渲染，360双核浏览器就是在ie和chrome之间来回切换，现在使用meta标签来强制使用最新的内核渲染页面<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">rgba不支持IE8解... 查看详情
对浏览器兼容问题的解决方案(代码片段)
目前，最为流行的浏览器共有五个：分别是ie,Edge浏览器（属于微软），火狐，谷歌（chrome）Safari和Opera五大浏览器。Trident内核：IE，360，，猎豹，百度；Gecko内核：火狐----------->这个浏览器内核是开源的浏览器内核，插件非常... 查看详情
浏览器兼容问题踩坑收集(代码片段)
1、vue开发的网站在搜狗浏览器下预览，报错：UncaughtReferenceError:__WEBPACK_AMD_DEFINE_ARRAY__isnotdefined 建议解决方案：将jquery的版本降下到2.x ， npminstall[email protected]^2.2.4--save2、vue开发的网站在IE9.0 查看详情
转：newdate()的浏览器兼容问题(代码片段)
使用newDate(str);创建日期对象时：谷歌浏览器： 火狐浏览器： IE浏览器： 可以看到，在ie浏览器下生成的日期不合法，查阅资料后发现，ie不支持"-"，而"/"在各浏览器下均支持，故处理为1varstr="2018-05-0220:00:00";2vardateStr=... 查看详情
ie9以下兼容@font-face的处理方案(代码片段)
...后解决了这个问题，现在在此记录下来“@Font-face”目前浏览器的兼容性 ?Webkit/Safari(3.2+)：TrueType/OpenTypeTT(.ttf)、OpenTypePS(.otf)； ?Opera(10+)：TrueType/OpenTypeTT(.ttf)、OpenTypePS 查看详情
2021-10-25浏览器兼容遇到的问题(代码片段)
项目场景：市面上常用的浏览器有：谷歌，新IE，FireFox，QQ，搜狗，Opera，360等。软件开发需要考虑到各种浏览器的兼容问题，这是一件很头疼的事情。这里我尤其夸一下谷歌和Opera，兼容性... 查看详情
部分浏览器set-cookie不成功踩坑记录(代码片段)
...在测试阶段，不同的终端的兼容测试时候，好几个不同的浏览器出现了不同的问题，有登录之后自动退出，有登陆不成功等问题。在pc端只有uc浏览器不成功，移动端有safari、360浏览器、qq浏览器、uc浏览器等。 结果排查：后... 查看详情
ie兼容问题动态生成的节点ie浏览器无法触发(代码片段)
ie下click()不能操作文档中没有的节点，所以你可以在click()前添加下面的语句document.body.appendChild(input);input.style.display=‘none‘;input.click();要想兼容ie9之前用attachEvent而不是addEventListener。还有ie9之前不兼容getElementsByClassName 查看详情
javascript之处理各种兼容问题(代码片段)
1、获取浏览器窗口的大小（兼容写法）functionwindowSize()clientWidth=document.documentElement.clientWidth||document.body.clientWidth;clientHeight=document.documentElement.clientHeight||document.bo 查看详情
移动端兼容问题(代码片段)
1.华为手机自带浏览器 不支持 text-decoration:underline;解决方案：varua=navigator.userAgent.toLowerCase();if(ua.match(/huawei/==‘huawei‘))$(‘.info-linka‘).css(‘border-bottom‘,‘1pxsolid‘); &n 查看详情
常见的兼容性问题(代码片段)
*png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.*浏览器默认的margin和padding不同。解决方案是加一个全局的*margin:0;padding:0;来统一。*IE6双边距bug:块属性标签float后，又有横行的margin情况下，在i... 查看详情