关于 IE 这坨屎
来源:互联网 发布:手机全景拼接软件 编辑:程序博客网 时间:2024/05/29 08:33
世界上最不要脸的事情就是ie8也弹出提示:“是否要将IE设置为默认浏览器"!!!
记录下最近遇到的IE的bug,大部分是样式的问题,因为jquery很好的解决了js的兼容性问题。
1.ie6/7 当text-ident遇到inline-block时,整个标签会被缩进掉。解决方案:1使用block+float,但无法居中。2再标签前面加个 占位符即可。
2.ie下空标签失效解决办法:background:url(about:blank);
3. overflow失效!样式position:relative引起!解决:再父类加position:relative;
4.ie: margin双倍!浮动引起!解决:display:inline;
5.透明:{filter: alpha(opacity=60)}
6.常用头部html代码
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="zh-CN" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="zh-CN" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="zh-CN" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="zh-CN" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
<title></title>
<meta charset="utf-8" />
<meta name="renderer" content="webkit"> //360默认使用极速模式,即webkit内核
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> //mobile下自适应,现在大多数智能手机的浏览器已经可以默认自适应了
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> //在未指定DOCTYPE时,在ie下文本模式会进入quirks模式,IE=edge会使其选择最高版本的文本模式,IE=8,则会选择文本模式IE8,如果安装了GCF,则可以使用chrome内核渲染(chrome太强大了),这里用处不大,因为一般都会有DOCTYPE,主要是在服务器上配置很有用。在服务器端指定响应头为IE=edge作用是:在使用以ie为内核的浏览器时(例如360安全模式)会使其文本模式选择最高版本的,这很重要。
apache下指定自定义http响应头
LoadModule headers_module modules/mod_headers.so
Header set X-UA-Compatible “IE=edge”
参考http://msdn.microsoft.com/library/cc817573.aspx
7.ie6下不支持console,ie7/8是支持的,但是使用360浏览器,当本地ie版本<=8时,当从极速模式切换到安全模式时,console对象会丢失,如果console.log则会导致页面挂掉。可以简单定义个:window.console = window.console || {log: Function};
8.页面变灰样式
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns="\'http://www.w3.org/2000/svg\'"><filter id="\'grayscale\'"><feColorMatrix type="\'matrix\'" values="\'0.3333" 0.3333="" 0="" 1="" 0\'=""></feColorMatrix></filter></svg>#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}
9.ie下的placeholder
define(['jquery'], function($){ if('placeholder' in document.createElement('input')){ return; } $("input[placeholder]").each(function(){ var $this = $(this); if($this.attr("type") === "password"){ return true; } var placeholder = $this.attr("placeholder"); $this.focus(function(){ if($this.val() == placeholder){ $this.val("").focus(); } }); $this.blur(function(){ if($this.val() == ""){ $this.val(placeholder); } }); if($this.val() == ""){ $this.val(placeholder); } });});
10.针对ie做处理的引用方式
<!--[if IE 6]><script src="/js/ie6.js" type="text/javascript" /></script><![endif]-->
11.ie6 绿色版下载地址http://download.csdn.net/download/a324539017/8363271
12.ie6 调试工具
引入此js代码即可
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="xxx.png"), sizingMethod='scale');
.ie8{ .border-radius{ behavior: url(/static/pie.htc); position: relative; z-index: 1; }}15.ie8下, input[type=text] 不给 line-height, 光标会在最上边,给 line-height 后,注意 不能使用 box-sizing: border-box; safari 下光标会为行高
- 关于 IE 这坨屎
- 关于IE
- 关于IE
- 关于IE
- 关于非IE浏览器
- 关于IE的"多线程"...
- 关于FF、IE兼容
- 关于IE脚本补助
- 关于IE 9.0 测试
- 自动化测试关于ie
- 关于ie浏览器降级
- 关于IE兼容性
- 关于ie兼容性问题
- 关于全屏幕IE窗口最小化
- 关于IE缓存的解决方案
- 关于IE缓存的解决方案
- 关于IE内存泄漏问题...
- 关于windows的IE临时文件
- iOS学习笔记(琐碎的知识点)
- FireFly菜鸟学习二(cocos2dx客户端和服务器通信实现)
- Putty使用帐号和密码的自动登录
- yum 安装Memcached
- Unity手游之路<十三>手游代码更新策略探讨
- 关于 IE 这坨屎
- Codeforces Round #285(Div.2)
- iOS开发笔记之三十——UILabel的使用总结
- Unity手游之路<十二>手游资源热更新策略探讨
- android 纯java代码实现自定义进度条(ProgressBar)
- Android动画介绍-Tween Animation
- Unity手游之路<十一>资源打包Assetbundle
- 返回的list如何循环后赋值到框体
- PendingIntent.getActivity()启动不起来Activity的解决办法