浏览器兼容性问题（IE9+;PC）

HTML/CSS

1. 默认margin、padding不一致

* {margin: 0;padding: 0;}

2. css3的animation

IE9不支持

3. display: flex

IE9不支持；IE10部分支持，使用display: ms-flexbox flexbugs@github

IE10下，justify-content 对容器内的span不起作用，需要设置span display: block/inline-block

IE11支持不加前缀的flex，且flex容器内部各部分宽度相同（与其他浏览器不一致），解决办法是设置容器内部各成员 width: auto

在 IE11 上 align-items 对于设置 min-height 的父元素不能实现垂直居中，改为设置height即可

4. 多个img放在一起时，部分浏览器会有默认间距

img使用float布局

5. webkit / trident 中 iframe 有默认高度其他无

6. IE11 th标签默认对齐方式为center，chrome为left，由于默认值的原因，若text-align是继承于父级的，也无效

9. IE11 button默认overflow:hidden，chrome为visible

10. PC上iframe内容超出时无法滚动，而移动端可滚动，且iframe内文本会自动换行

11. IE11 伪元素超出父元素边界的部分不会显示

12. IE11下使用负边距后该元素可能超出父元素边界，如果父元素有overflow则会出现滚动条（如使用负边距居中定位时）

13. IE11下color: #xxxxxx可能不能识别chrome那边能生成的颜色值，如8位的颜色值，使用六位的即可

14. IE Get请求如果参数相同，会直接使用缓存（头部添加cache-control: no-cache和pragma:no-cache）

1. IE11中status 302的请求的response为undefined，并且request.status为0

2. IE11中使用js改变input的value会触发input的onchange事件，其他浏览器不会

// 若在onchange事件中对输入框处理完毕后手动设置value，会再次触发onchange事件
document.getElementById('#input').value = ''

3. IE11等浏览器不支持input选择文件夹（添加webkitdirectory属性）

4. IE若要阻止默认事件，使用event.returnValue = false，其他浏览器使用event.preventDefault()

5. IE若要阻止事件冒泡，使用event.cancelBubble = true，其他浏览器使用event.stopPropagation()

6. IE获取元素计算好的样式，使用el.currentStyle()，其他浏览器使用el.getComputedStyle()

7. IE、Edge内使用window.postMessage时必须制定第二个参数

PS：注意编译器的格式化代码，如VSCode里的Prettier，若设置了添加自动结尾comma，在format时会自动加逗号，这个ES6+特性在IE下是不支持

欢迎关注、点赞

浏览器兼容性问题（IE9+;PC）相关推荐

pc端不同浏览器兼容性问题及解决方案
代码兼容:IE7及以上,360浏览器,搜狗浏览器,谷歌,火狐,欧朋等等. 一．需要注意的地方: 1.写好标准头: 2.首先引入初始化css,保证消除不同浏览器的细微差别. 具体内容: *{margin ...
WEB前端浏览器兼容性问题(PC端及移动端)
WEB前端浏览器兼容性问题(pc端及移动端) PC端 (一)html部分1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]> <script type=&quo ...
PC端浏览器兼容性解决方案
代码兼容:IE7及以上,360浏览器,搜狗浏览器,谷歌,火狐,欧朋等等. 一.需要注意的地方 1.写好标准头 <!DOCTYPE html> 2.首先引入初始化css,保证消除不同浏览器的 ...
PC/H5端各浏览器兼容性问题及解决方案？
概念:所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码解析的差异,造成页面显示效果不统一的情况. 1>不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情 ...
使用 ES6 的浏览器兼容性问题
以前对浏览器兼容性问题只是大概知道一些点,没想到这次真正着手去做的时候,还是碰到了很多问题.刚开始的时候一边解决问题,一边想着:用 IE8 的都是神经病,到后来,我发现完了,I LOVE IE. 0x ...
CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
47种常见的浏览器兼容性问题大汇总
浏览器兼容性问题大汇总 Ø JavaScript 3 1. HTML对象获取问题 3 2. const问题 3 3. event.x与event.y问题 3 4. window.location.hr ...
再谈浏览器兼容性测试
今天跟大家聊一个老生常谈的话题:浏览器兼容性测试. 测试国内网站的同学是不是已经非常头疼了,因为面对的浏览器除了国际大牌如IE, Chrome, Firefox, Opera, Safari, 还有国 ...
12款很棒的浏览器兼容性测试工具
对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,让我们一起看看这些很棒的工具. Spoon Browse ...
css 定位兼容性,CSS基础：定位与浏览器兼容性
position属性介绍: CSS position属性用于指定一个元素在文档中的定位方式.top,right,bottom 和 left 属性则决定了该元素的最终位置. position 属性值 ...

浏览器兼容性问题（IE9+;PC）

浏览器兼容性问题（IE9+;PC）相关推荐

最新文章

热门文章