码迷,mamicode.com
首页 > 其他好文 > 详细

关于 IE 这坨屎

时间:2015-01-14 19:58:37      阅读:337      评论:0      收藏:0      [点我收藏+]

标签:ie   360浏览器   内核   x-ua-compatible   renderer   

世界上最不要脸的事情就是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]-->


关于 IE 这坨屎

标签:ie   360浏览器   内核   x-ua-compatible   renderer   

原文地址:http://blog.csdn.net/a324539017/article/details/42713521

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!