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

最新推荐文章于 2025-06-22 16:04:27 发布

原创最新推荐文章于 2025-06-22 16:04:27 发布 · 4.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器兼容性 #IE9

JS 专栏收录该内容

24 篇文章

订阅专栏

本文详细列举了在IE9及更高版本浏览器中遇到的HTML/CSS兼容性问题，包括默认margin和padding不一致、CSS3 animation和flex布局的不支持、img和iframe的布局问题、button和th的默认样式差异、颜色值识别问题以及JavaScript中跨域请求、事件处理和样式获取的差异。提供了解决方案，有助于优化在IE浏览器下的网页表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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下是不支持

欢迎关注、点赞