使用 meta 标签来调节浏览器的渲染方式, 告诉浏览器用哪种内核渲染, 360 双核浏览器就是在 ie 和 chrome 之间来回切换, 现在使用 meta 标签来强制使用最新的内核渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
rgba 不支持 IE8 解决: 用 opacity
CSS3 前缀
-webkit- webkit 渲染引擎 chrome/safari
-moz gecko 引擎 firefox
-ms- trident 渲染引擎 IE
-o- opeck 渲染引擎 opera
过渡不兼容 IE8, 可以用 JS 动画实现
background-size 不支持 IE8, 可以用 img
使用 PIE.htc 让 IE6/7/8 支持 CSS3 部分属性, 像 CSS3 的 border-radius,box-shadow,css backgrounds(-pie-background),Gradients,RGBA 属性
- .border-radius {
- border-radius: 10px;
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- background: #abcdef;
- behavior: url(css/PIE.htc);
- }
用 css hack
- IE6: _
- IE7/7: *
- IE7/Firefox: !important
- IE7: *+
- IE6/7/8: \9
- IE8: \0
IE 浮动下 margin 产生的双倍距离, 通常使用 float:left 来实现, 浏览器存在兼容性问题, 导致图片与 后面的内容存在 margin 不一致的问题, 解决方法就是给图片添加 diaplay:inline 即可
ie8 不支持 nth-child, 但支持 first-child 和 last-child, 可以通过转化写法来处理问题, span:nth-child(2)可以转换为 span:first-child+span, 可以使 ie8 显示该内容, last-child 可以自定义一个 class 类兼容 ie8 写法
IE8 下不支持 html5 属性 placeholder, 解决问题的 js 插件挺多的, 常用的使用 jquery.JPlaceholder.js 插件处理问题
识别 HTML5 元素, IE 中可能无法识别 nav/footer, 使用 html5shiv
火狐下表单阻止表单默认提交事件: 在 form 中添加 action="javascript:", 秒杀上述所有默认行为;
始终为按钮 button 添加 type 属性, IE 下的默认类型是 button, 其他浏览器下的默认类型是 submit
IE 下删除所有不必要的 console 语句, IE 下当遇到 console 时不识别之后报错, 代码不会执行, 或者全局自定义一个 window.console 方法
IE 浏览器下由于参数过长导致通过 GET 请求下载文件方法报错, 解决改为 POST 请求
IE 浏览器下 iframe 弹窗中输入框光标丢失 (无法输入) 问题, 解决清一下 frame
兼容 IE8 new Date()返回 NaN 问题, 解决自定义方法
- function parseISO8601(dateStringInRange) {
- var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/,
- date = new Date(NaN), month,
- parts = isoExp.exec(dateStringInRange);
- if(parts) {
- month = +parts[2];
- date.setFullYear(parts[1], month - 1, parts[3]);
- if(month != date.getMonth() + 1) {
- date.setTime(NaN);
- }
- }
- return date;
- }
来源: http://www.bubuko.com/infodetail-2603573.html