关于 IE 这坨屎

最新推荐文章于 2022-06-18 10:24:49 发布

天晟

最新推荐文章于 2022-06-18 10:24:49 发布

阅读量1.2k

点赞数

文章标签： IE 360浏览器内核 X-UA-Compatible renderer

本文链接：https://blog.csdn.net/a324539017/article/details/42713521

版权

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




<html>
<head>
<title></title>
<meta charset="utf-8" />

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做处理的引用方式

11.ie6 绿色版下载地址http://download.csdn.net/download/a324539017/8363271

12.ie6 调试工具

13. ie8下背景图拉伸

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="xxx.png"), sizingMethod='scale');

14.ie8圆角

.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 下光标会为行高

天晟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于 IE 这坨屎

世界上最不要脸的事情就是ie8也弹出提示：“是否要将IE设置为默认浏览器"！！！记录下最近遇到的IE的bug，大部分是样式的问题，因为jquery很好的解决了js的兼容性问题。1.ie6/7 当text-ident遇到inline-block时，整个标签会被缩进掉。解决方案：1使用block+float,但无法居中。2再标签前面加个 占位符即可。2.ie下空标签失
复制链接

扫一扫