首页 > 代码库 > 关于 IE 这坨屎
关于 IE 这坨屎
世界上最不要脸的事情就是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=http://www.mamicode.com/"/js/ie6.js" type="text/javascript" /></script>
关于 IE 这坨屎